Fixing Dropdown Size in Configurator UI

In Configurator UI, dropdown UI element can be used to display 0/1 option feature's option in UI. In Configurator, we do not have control to specify width of the dropdown. It is automatically adjusted to accomodate largest string in its optoins. I have seen response from Bruce Bowers (of Sun microsystem, now Oracle) on this in one of the forum.

Here is a response from Bruce Bowers on this.
The following idea can be extended to tweak other styles in Configurator as well.

------------------

We are currently on 11.5.10.  I actually examined the HTML code generated for dropdowns by the OA Framework (see below).  The HTML select element (dropdown) is actually embedded in a HTML table for some reason (perhaps it's necessary for the Partial Page Refresh functionality.)  This embedding makes it harder to style the dropdown itself.  However, the select element does have a class attribute with the value "x4".  Therefore, you can give all of the dropdowns on a page the same width (or other style property).  To do this, add a Raw Text UI element with the following text:

<style>
select.x4 {width:200px;}
</style>

This is not strictly conformant to the HTML standard (because style elements are only supposed to appear in the head of the HTML page), and it is not guaranteed to work from Oracle release to Oracle release, but it is accepted by most browsers, and we have been using this general approach for several years without issues.

Bruce

-----

HTML code generated for a Configurator Dropdown List UI element:

<table id="czUiNode_1__xc_" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="right" nowrap></td>
        <td></td>
        <td valign="top" nowrap>
            <script>function _uixspu(f,v,e,s,pt,p,o){if (!o) o=new Object();o.event=(e)?e:'update';if (s) o.source=s;if (p) { o.partial='true';if (pt) o.partialTargets=pt;_submitPartialChange(f,v,o);} else submitForm(f,v,o); }</script>
            <select id="czUiNode_1" class="x4" onchange="_uixspu('DefaultFormName',1,'update','17840',0,'true',{'_FORM_SUBMIT_BUTTON':'_fwkActBtnName_17840_update','evtSrcRowIdx':'0','evtSrcRowId':'CZApplicationModule.OF_1_PG0row3'});return false;" name="czUiNode_1">
                <option></option>
                <option value="opt9432">[Text Source]</option>
                <option value="opt13683">[Text Source]</option>
                <option value="opt9433">[Excluded Items Prefix] [Text Source] [Excluded Items Suffix]</option>
            </select>
        </td>
    </tr>
</table>