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

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


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:



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) { 
    <apex:form >
       <apex:pageBlock >
           <apex:pageBlockSection >
               <apex:inputField value="{!Test_Object__c.Name}"/><br />
               <apex:inputField value="{!Test_Object__c.MultiTest__c}" styleClass="myMultiClass"/>

Show multi-select width working

  • Hey peter ! it's not working. – Pankaj Feb 15 '13 at 6:11
  • I see the issue. I didn't notice it before, but you actually want to change the width of the lightbox/popup created by apex:inlineEditSupport. This method works on the multi-selects in the page, but not the lightbox/popup. I just verified it works in my DE when all you need to do is style the multi-select in the page (added screen shot). Unfortunately, I don't see a way to set a class on the lightbox/popup select, so anything you do going this route for that would need to rely on behind-the-scenes markup. :( – Peter Knolle Feb 15 '13 at 11:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.