2

I am trying to use the standard right-left multi-select picklist in my VF Page so it looks something like this:

enter image description here

I have tried this:

<apex:inputField value="{!Request_for_System_Change__c.Benefits_Reasons__c}"/>     

Unfortunately the default looks like this: enter image description here

and when I try to style it as below:

<apex:inputField value="{!Request_for_System_Change__c.Benefits_Reasons__c}" style="width: 100px; height: 100px"/>

it looks like this:

enter image description here

So how on earth can I get this to look good?

In the standard field definition the picklist is defined as below with visible lines: enter image description here

3
  • 1
    please check your css. are you doing Standardstylesheet='false' or showheader='false' Jan 5, 2016 at 13:07
  • This normally works fine; the problem is likely to be the tags surrounding the apex:inputField or something major in the page as Tushar suggests.
    – Keith C
    Jan 5, 2016 at 13:21
  • @TusharSharma: Yes, we have standardStylesheets="false" showHeader="false" at the top of the page. so how can I style this properly? Jan 5, 2016 at 13:24

3 Answers 3

1

I think css is overriding the dropdown css in page.

Please check css static resource or style in page with '.select' and change accordingly.

1

As you have standardStylesheets="false" showHeader="false". SO you have only option left is try to manually style this using the standardfield css. Use this field in some page and copy css from their and use it in your code.

Otherwise you can use https://github.com/metadaddy-sfdc/Visualforce-Multiselect-Picklist . Select which method suits you better. I think in your case first approach is better.

1

as Arun and Tushar have said, the org styles were affecting the select element.

so I changed it to include inline style as below

 style="height:auto !important;"

and now it works

1
  • Please mark it as answered so that others can get help.
    – Arun SFDC
    Jan 8, 2016 at 6:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .