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.