How do I line up many Multi-select picklist inputFields on a Visualforce page?

Question

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?

Answer 1

You cannot just set the styleClass of the apex:inputField. Behind the scenes there is more going on to render the controls and setting a styleClass does not work. Additionally, setting the style attribute directly on the the apex:inputField such as style="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.

<!-- assumes jQuery is in a folder called js in a static resource called JQuery -->
<apex:includeScript value="{!URLFOR($Resource.JQuery, 'js/jquery-1.8.1.min.js')}"/>
<script type="text/javascript">
    var j$ = jQuery.noConflict();
    j$(document).ready(function() {
        j$("select.myMultiClass").each(function(i, val) { 
           val.style.width = "100px"; 
           val.style.height = "250px";
        });
    });
</script>

And on the VF page:

<apex:pageBlockSection title="My Group of Multi-selects" columns="1" >
    <apex:inputField value="{!My_Object__c.My_Multi_Select_1__c}" styleClass="myMultiClass"/>
    <apex:inputField value="{!My_Object__c.My_Multi_Select_2__c}" styleClass="myMultiClass"/>
    <apex:inputField value="{!My_Object__c.My_Multi_Select_3__c}" styleClass="myMultiClass"/>
    <apex:inputField value="{!My_Object__c.My_Multi_Select_4__c}" styleClass="myMultiClass"/>
    <apex:inputField value="{!My_Object__c.My_Multi_Select_5__c}" styleClass="myMultiClass"/>
</apex:pageBlockSection>