You need to sign in to do that
Don't have an account?
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.
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
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.
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.