I have 5 different Multi-select picklist fields on an Object. In my Visualforce page I use an <apex:inputField>
display them on the page. Visualforce renders two side by side Multi-selects with left and right arrows between them. This is great as it saves a lot of work; however, when I have more than one Multi-select apex:input field the page looks messy because each one will have a different width.
How can I get the Multi-select picklist apex:inputFields
to be a uniform size?
Best Answer
You cannot just set the
styleClass
of theapex:inputField
. Behind the scenes there is more going on to render the controls and setting astyleClass
does not work. Additionally, setting thestyle
attribute directly on the theapex:inputField
such asstyle="width: 200px"
does not work.Adding Javascript to manipulate the controls after the page loads will solve the problem.
Here is a jQuery snippet that fires after the document loads to then manipulate the style of the select element directly to set a uniform height and width on each one.
And on the VF page: