[SalesForce] How to get multi-select picklist values to display on line indents on visualforce page

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>

I've had simliar requirements and the jQuery Multi-Select works fantastically well for this. In particular the filtered version is amazing if you have a lot of options to choose from.

Multi-Select w/Filters