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

SLDS - InputField MultiSelect PickList

I am re-styling existing VF pages. I have an inputField that is rendered as multiSelectPickList. I tried using 'slds-dueling-list', but I am not sure the code is right. There is no example code on the inputField with SLDS style class on lightning design system site. Does anyone has sample code? I get multiple Left and Right arrow buttons as shown below.
User-added image
Hi Nuevo,

Yes you can modify the elements in slds duel list. Use inspect element and find out the specific class for which you want modifiecations.

/* To change the height and width */
.THIS .slds-dueling-list__options{
    width: 400px !important;
    height: 400px;

/* To apply padding inside options*/
.THIS .slds-listbox_vertical .slds-listbox__option_plain, .THIS .slds-listbox_vertical .slds-listbox__option--plain, .THIS .slds-listbox--vertical .slds-listbox__option_plain, .THIS .slds-listbox--vertical .slds-listbox__option--plain{
    padding: 0.2rem .75rem;

/* To show full text in options instead of text truncation*/
.THIS .slds-dueling-list__options ul li .slds-truncate{
	white-space: pre;
    font-size: 12px;

/*To apply border */
.THIS .slds-dueling-list__options ul li.slds-listbox__item{
   border-bottom: 1px dotted #f2f2f2;

Hope this will help you fix your issue.

Sanjay Kumar​
Hi Sanjay thank you for your reply. But if you look at the screenshot in my post you can see the Left and Right arrow buttons are showing twice. I do not see any style specific to the buttons above. Am I missing something?
Do you have a working example? 
My code is as below:
<div class="slds-form-element__control"> 
               <apex:inputField value="{! myValue}" styleClass="slds-dueling-list slds-dueling-list__options" />