Thursday, March 20, 2008

Apex shuttle item: size matters

Always check out the original article at 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;}
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 (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.


Anonymous said...

This post helped me.

Many Thanks,

Anonymous said...

Thank you so much, that is incredable.... I would have spend 7 hours figuring that out!!

Anonymous said...

same here, thanks for the post.

Anonymous said...

Thanks! That was a big help.

Graham M said...

It's strange that Firefox doesn't interperate the font-size attribute. Not even in FF 8.0.

Byte64 said...

Hi Graham,
you can try to file a bug at bugzilla.


yes you can!

Two great ways to help us out with a minimal effort. Click on the Google Plus +1 button above or...
We appreciate your support!

latest articles