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 3.0 new page item types

I just found out that in Apex 3.0 there are 4 new interesting page item types that i completely overlooked for some unknown reason.

One of these page item types, the so-called HTML editor (standard) has been promptly adopted because it can quickly make more appealing the global notification messages that i deliver with the application i announced in a previous posting.

I'll not spend further time to describe the new HTML editor item types, a replacement for the existing Textarea with HTML editor, because Patrick Wolf posted an interesting article where he refers of a trick provided by Carsten Czarski for including images.

Another new entry is the pop-up color picker, a handy widget that allows you choose a color by selecting the desired hue from a pop up window and returning the equivalent hexadecimal code. This is especially useful when one wants to let the user customize the look of certain page elements interactively. Before the introduction of this tool, i used a similar concept for creating the colored radio buttons that you can see in the Yocoya Regular Expression Workbench.
This kind of page element was simply obtained by using a LOV, either static or dynamic where each element is made up of a return value consisting in the hex color code and a description containing the required html fragments. With the introduction of the pop-up color picker there is finally a built-in element that comes to the rescue.

Then there is a date picker with a user defined item format mask.
Until now i never had a need for a non-standard format mask, so i don't expect to use this kind of elements any time soon, but you can see it at work in the page linked below.

Finally, there is a most interesting item type, something that has been used quite a lot of times in certain pages of Apex itself since the beginning, but that was not available as a generic item
type for the normal developer: the shuttle.

You can see all these item types together in a simple live demo page.