Apex shuttle item: size matters

Always check out the original article at http://www.oraclequirks.com for latest comments, fixes and updates.

Apex tip of the day: how to control the size of a shuttle item, one of the object types i mentioned in a previous posting.

The default width for each select list participating in the shuttle item is 150 pixels and is defined in one of the built-in stylesheets, for example /i/css/core_V22.css or /i/css/apex_3_1.css, but there could be others depending on the theme you picked, i didn't check all of them.

Clearly you could redefine the width inside these files, supposing you have full control of them, but this is not a good idea because it would be very easy to loose track of the change at the first upgrade of Apex.

A much better approach is to redefine the default width by specifying a similar selector in another stylesheet that you link at a later point in the page header because this is how cascading stylesheets are supposed to work in the end.
You can see how this technique works in the linked example.
In this sample page i also demonstrated that is possible to set up an asymmetrical shuttle item by specifying class="asymmetrical" in the HTML Form Element attributes property and handle them differently with the help of an internal CSS stylesheet.
You can see below the source code of the stylesheet that must be copied and pasted in the HTML page header attribute or saved as a separate file and linked in the page header, as you prefer:

<style type="text/css">
.shuttleSelect1 select,.shuttleSelect2 select{width:300px;}
.shuttleSelect1 select.asymmetrical{width:150px;}
.shuttleSelect2 select.asymmetrical{width:300px; color:red;}
</style>

As you can see i also included a color attribute for the right hand side list, but you'll see the effect of this setting only after moving one item to the right list and clicking on submit, that is after reloading the page. It can be useful when you load a page where some data was pre-selected and you want to highlight these values for some reason.

If you want to redefine the size of the shuttle on an exceptional basis, you can specify the width as illustrated in the picture below, that is at page item level.


The height of the shuttle is controlled by the attribute height and is measured in lines of text.

In HTML Form Element Attributes you put the CSS inline style attribute where you specify the graphical properties that will be applied directly to both multiselect lists, otherwise you can specify a class attribute defined in a separate CSS stylesheet (as i did in the case of the asymmetrical lists explained above).

Interestingly enough, the font-size property is handled correctly by Safari 3.1 for Mac, Internet Explorer 6 SP1 and 7, Opera 9.23+, but not by Firefox 2.0.0.12 (Win & Mac) that ignores it. At first i thought that this was caused by an advanced option of Firefox overruling the font settings in the page, but this option is set to "allow pages to chose their own fonts, so it must be a bug of FF.

Finally, note that the property width that is normally used for ordinary text areas and input fields doesn't affect the width of the shuttle.

See more articles about Oracle Application Express or download tools and utilities.

Apex and favicon

As usual this started as "just-gimme-five-minutes-and-i'm-done!"...

Three hours have gone, but, at least, now i can write the ultimate posting about Oracle Application Express and favicons.

I've just wasted enough time on this stupid exercise so, i am not going to make the story long.
I even take for granted that you know what a favicon is! ;-)

The method i suggest works with Internet Explorer 6 and 7, Firefox 1.0 through 2.0, Opera 9.2 and, i am told, Safari for Mac.

Ready, set, go:
put the following line in the page template header (somewhere between the opening and closing HEAD tags) if you want to display the favicon on all pages using such template.

<link rel="shortcut icon" href="home/favicon.ico" type="image/x-icon"/>

typically home should be the root folder of your site, however the favicon mechanism works also if you specify a path like #APP_IMAGES#favicon.ico, supposing you have loaded the image favicon.ico into the static images application repository. If the image wasn't associated to any application, then you'll have to use #WORKSPACE_IMAGES# instead, however keep in mind that for heavy-duty sites there is a significant performance impact when serving images from the Apex repository, so it is strongly recommended that you place icons on the web server.

If you store favicon.ico in the root folder, then you can replace home/favicon.ico with www.yourdomain.com/favicon.ico or just /favicon.ico.

If you prefer, you can specify the above LINK tag instruction in the Page header section of the desired pages in case you don't want to put it at the template level.

When the favicon.ico doesn't display, it's always a good idea to double check the source of the returned page, it's easy to forget a slash or add one too many.

There are a number of sites giving instructions about how to put a favicon, but not all of them mention the TYPE attribute. I found that without TYPE attribute, Internet Explorer 7 refused to load the favicon under certain conditions, so i recommend that you specify it at all times.
Also, you can check the image encoding returned by the web server, from this link: web-sniffer.net

Enter the full path to the favicon.ico in the input field and press submit.

I also found some sites and forums echoing the myth of "favicon MUST reside in the root folder", which probably was true some time ago, but not necessarily with the newest browsers.
Clearly if you opt for the root folder, chances are that the favicon can be displayed by older browsers.

I mean, placing it in the root folder is a good thing in general, but it is not sufficient to make it work under all circumstances.

Firefox 2.0 allows you to specify icons in different formats, like GIF, but Internet Explorer is more picky on this subject and wants an ICO image.

If you don't mind about older browsers you don't even need to call it favicon.ico, i saw more than one site where the favicon had a different name altogether, albeit the .ico extension was present.

Last but not least, if you are going to implement your favicons, do not forget to erase the web cache of Internet Explorer (and perhaps Firefox too...), otherwise you may find yourself
scratching your head and asking why this stupid favicon doesn't display after all.

Every tutorial is no-good without at least one practical example, so, let me copy the source code of my newly favicon-enabled web site: www.yocoya.com.

<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"/>

So, this is how i spent the last three hours.
Very useful indeed.

Hope it helps.


PS: if you can't yield to the temptation of trying out your apex favicon, but you don't know how to get your logo in this format, have a look at this site. I guess you must supply a 16x16 or 32x32 pixels to start off.

Updated January 22, 2010
If you installed Photoshop or Photoshop Elements on Windows or Mac OS X, from the following page you can download a plugin for opening and saving images in ICO format.
With my Photoshop Elements 6 on Mac OS X 10.6.2, i downloaded the Mac CS3/CS4 version and installed it in less than a minute. Two minutes later i had already saved the image as ICO (after restarting PSE) and it worked like a charm.
Cool!