Home > Oracle Application Express (APEX) > Oracle APEX – Controlling the Width of “Select Lists” in APEX forms.

Oracle APEX – Controlling the Width of “Select Lists” in APEX forms.

July 3rd, 2009 Jasdeep Singh

For one of our clients, we developed an APEX application (APEX 3.2.1) and during a screen review they were particularly concerned with the look of the entry fields that had disproportionate lengths. As a best practice, its important for an application to have a uniform look to be aesthetically pleasing.  The application required a form with multiple select drop down lists and by default “select lists”  in APEX display different widths based on the existing data value lengths. During QA the users were not pleased with the look of the select lists and requested to see uniformed columns. We decided to make the width of the “select lists” to match the width of the longest select list value in the form.

Image of Form before the Select Lists are sized to Match

Image of Form before the Select Lists are sized to match

Image of Form after the Select Lists are sized to match

Image of Form after the Select Lists are sized to match

Within APEX forms, we can control the width of the items by using the “Width” attribute for an item.   Unfortunately setting this attribute does not work for a “Select List” item. My solution was to use inline style (CSS attribute) for controlling the select list width. To apply the style to control the width, edit the Select List item (Page Properties -> Edit Page Item -> Element Properties) and update the “HTML Form Element Attributes” setting to the required width. See example image below. (Example: style=”width:200px”).
Apply Style in HTML Form Element Attributes

Apply Style in HTML Form Element Attributes

I applied the same width to all the select lists on the form.  Now, when we run the application, take note of the uniform ”Select Lists” on the form as shown below.
Select Lists in the Form have the same Width

Select Lists in the Form have the same Width

The key here for such a simple task, was using CSS styles.
Categories: Oracle Application Express (APEX) Tags: , ,
Comments are closed.