Need to change the width of multi-select picklist on VF page

Question

i have one multiselet field which i am displaying on VF page.But due to change in Spring 13 release now it appears as

But i want it in small size because my page layout is disturbing from this. I tried to overide style of multi select picklist but its not working fine. Please suggest something. Thanks in advance

Answer 1

You don't have the ability to specify the style for this input field, as it generates complex HTML. You can sometimes override the styles by specifying others with the same name in your page, but this would be very fragile as if Salesforce change their styling it would suddenly break.

When I've needed to style the multi-select picklist, I've created my own Visualforce component to provide this functionality. That way I have full control over all aspects of it.

The Visualforce developer's guide has a great example of a multi-select picklist type element, at the bottom of the following section:

http://www.salesforce.com/us/developer/docs/pages/Content/pages_dynamic_vf_sample_standard.htm

Answer 2

I completely agree with @BobBuzzard about not relying on any standard styles, etc. Upvote it!

There is a styleClass attribute for apex:inputField which will result in a class attribute being generated on the select element. VF does definitely generate way more complex html/css/js than just the simple html select, but you can get to the select in jQuery without relying on anything other than the styleClass and the select. Granted, the markup could change but it is likely that the multiselect will always be a select element. So, you could write some JavaScript to set the width after the page loads.

This code will set the width and height on all of the select elements that have a styleClass/class of myMultiClass.

<apex:page standardController="Test_Object__c">
    <!-- get your jQuery somehow -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
            setTimeout(function() {
                $j('select.myMultiClass').each(function(i, val) { 
                    $j(val).width(100);
                    $j(val).height(300);
                })
            },100);
        });
    </script>
    <apex:form >
       <apex:pageBlock >
           <apex:pageBlockSection >
               <apex:inputField value="{!Test_Object__c.Name}"/><br />
               <apex:inputField value="{!Test_Object__c.MultiTest__c}" styleClass="myMultiClass"/>
           </apex:pageBlockSection>
       </apex:pageBlock>
   </apex:form>
</apex:page>