Customizing the width of a UI control using contentStyle attribute

You can use contentStyle attribute to override the default width of specific types of UI controls. This property is applicable for single select and multiple select controls( af:selectOneChoice, af:selectManyShuttle, af:selectBooleanRadio etc.) and input controls( af:inputText, af:inputRangeSlider, af:inputListOfValues,af:richTextEditor etc. ).

<af:selectOneChoice  contentStyle="width:200px" label="Select an Item:" id="soc1">

From Web User Interface Developer's Guide ...
If the field is wider than the space allocated, the browser will not truncate the field but instead will take space from the label columns. This potentially could cause the labels to wrap more than you would like. In this case, you may want to consider reducing the width of the field contents (for example, use a smaller contentStyle width on an inputText component).

However, you should be cautious while using 'contentStyle' to override the default width of the controls, especially with controls like af:selectOneChoice. In case of af:selectOneChoice, by default, run time would try to set the 'width' by considering the maximum size of the displayed list item values. This 'defaulting behavior' is useful if your application is later enhanced to support a different language where the width of the af:selectOneChoice may vary based on the language characteristics.

Comments

Anonymous said…
Thanks!! Very helpful
ravi said…
Thanks jobinash!
mosta said…
that was helpful, Thanks

Disclaimer

The views expressed on this blog are my own and do not necessarily reflect the views of my employer.