function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Bertrand DBBertrand DB 

Lightning:dualListbox: height

Hello,
I'm using the lightning:dualListbox component, as described here: https://developer.salesforce.com/docs/component-library/bundle/lightning:dualListbox/example

I'm having troubles to adjust the height. My issue is that the number of items is limited (4), so it doesn't look nice:
User-added image

My question is: how I can reduce the white part (red arrow on the image)?

Code is like: 
<aura:component>
    <aura:attribute name="options" type="List" default="[
        { label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' }]"/>

    <lightning:dualListbox name="languages"  
                           label= "Select Languages" 
                           sourceLabel="Available" 
                           selectedLabel="Selected" 
                           fieldLevelHelp="This is a dual listbox" 
                           options="{!v.options}" 
                           onchange="{! c.handleChange }"/>

</aura:component>

Thank you!
Best Answer chosen by Bertrand DB
sarthak nigam 3sarthak nigam 3
Try using the size option 
size="5"

<lightning:dualListbox  label="some label" name="some name" 
                       sourceLabel="Available"
                       selectedLabel="Chosen"
                       options="{!v.options}"
                       onchange="{!c.handleChange}"
                                           size="4"
                        />

All Answers

Raj VakatiRaj Vakati
Add this Style . Change Height based on your req
  
.THIS .slds-dueling-list__column_responsive .slds-dueling-list__options {
    width: auto;
    height: 40%;
    max-width: 15rem;
}

 
sarthak nigam 3sarthak nigam 3
Try using the size option 
size="5"

<lightning:dualListbox  label="some label" name="some name" 
                       sourceLabel="Available"
                       selectedLabel="Chosen"
                       options="{!v.options}"
                       onchange="{!c.handleChange}"
                                           size="4"
                        />
This was selected as the best answer
Bertrand DBBertrand DB
Works perfectly, I wonder why I forgot this while reading the doc :) Thank you!
Brian Kristiansen 9Brian Kristiansen 9
Anyone know how to do this in a lightning web component?
JAVED AHMED 1JAVED AHMED 1
hiii all,
 can we do the same thing with lwc
someone plzz help

thanks in advance