function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Lindsay RoseLindsay Rose 

How to style multi select pick lists

Any ideas would be greatly appreciated! 


Is there a way to apply custom styling to multi select picklists on a visualforce page? I have a visualforce page with about 12 multiselect picklists, and as items are selected and deselected the width of each picklist changes.

I would like to find a way to force all of the picklists on my page to a specific consistent width. I want the left and right picklists to be the same width regardless of their contents. I have not been able to get this working using the style tag, it simple spreads the lists apart and adds unnecessary space around the arrows.

Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

We struggled with this for quite a while a year or two ago.  In the end we gave up and created our own component that had two picklists side by side, each of which supported multiple selection.

 

There's a good example of this in the visualforce developer's guide at:

 

http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#CSHID=pages_dynamic_vf_sample_standard.htm|StartTopic=Content%2Fpages_dynamic_vf_sample_standard.htm|SkinName=webhelp

 

near the bottom of the page.

All Answers

bob_buzzardbob_buzzard

We struggled with this for quite a while a year or two ago.  In the end we gave up and created our own component that had two picklists side by side, each of which supported multiple selection.

 

There's a good example of this in the visualforce developer's guide at:

 

http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#CSHID=pages_dynamic_vf_sample_standard.htm|StartTopic=Content%2Fpages_dynamic_vf_sample_standard.htm|SkinName=webhelp

 

near the bottom of the page.

This was selected as the best answer
Khai TranKhai Tran

I found the way to do it.

Get the Id from Inspect (Google chorme), then use CSS to set some properties for that Id.
This is the code in my vf page, It's absolutely work.
<style>
[id*=j_id0\:j_id2\:j_id3\:j_id35\:j_id48_unselected] {width: 300px !important; height: 100px;}
[id*=j_id0\:j_id2\:j_id3\:j_id35\:j_id48_selected] {width: 300px !important; height: 100px;}
<style>

"\" is escape character, if you don't get it, code won't work.