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
ADRIANA CALLEJAADRIANA CALLEJA 

How do I change lightning:dualListbox column width?

Hi, I'm working with lightning:dualListbox , I would like to custom it because the label's options are too long. I haven't found how does it works...

This is an example of my lightning:dualListbox 
User-added image
Thanks in advance!

Regards
Best Answer chosen by ADRIANA CALLEJA
Raj VakatiRaj Vakati
Use Class attribute by writing you styles for width. I haven't tried completely for the width 
  
class="slds-text-heading_large slds-text-color_error"


  
<lightning:dualListbox aura:id="selectOptions" name="Select Options"  label="Select Options" class="slds-text-heading_large slds-text-color_error"
                           sourceLabel="Available Options" 
                           selectedLabel="Selected Options" 
                           options="{! v.listOptions }"
                           value="{! v.defaultOptions }"
                           requiredOptions="{! v.requiredOptions }"
                           onchange="{! c.handleChange }"
                           min="{!v.min}"
                           max="{!v.max}"
                           
                           />

 

All Answers

Raj VakatiRaj Vakati
Use Class attribute by writing you styles for width. I haven't tried completely for the width 
  
class="slds-text-heading_large slds-text-color_error"


  
<lightning:dualListbox aura:id="selectOptions" name="Select Options"  label="Select Options" class="slds-text-heading_large slds-text-color_error"
                           sourceLabel="Available Options" 
                           selectedLabel="Selected Options" 
                           options="{! v.listOptions }"
                           value="{! v.defaultOptions }"
                           requiredOptions="{! v.requiredOptions }"
                           onchange="{! c.handleChange }"
                           min="{!v.min}"
                           max="{!v.max}"
                           
                           />

 
This was selected as the best answer
ADRIANA CALLEJAADRIANA CALLEJA
Thank you!
I'll try it

Regards
Nicole McGuire 10Nicole McGuire 10
This is the only thing that worked for me.  I added this code to the CSS Style in the Lightning Component: 

.THIS .slds-dueling-list__column_responsive {
    min-width: 45%;
}
.THIS .slds-dueling-list__column_responsive .slds-dueling-list__options {
    min-width: 100%;
} 
Namrata RawalNamrata Rawal
Try this, I added this code to the CSS Style in the Lightning Component: 
.THIS .slds-dueling-list__column_responsive {
flex: 0 1 var(--lwc-sizeSmall,15rem) !important;
min-width: 35rem;
}
If it is useful, Please make it Best Answer 
 
 
Keith FimreiteKeith Fimreite
First move your picklist field to a single column instead of a 2 column layout. Then As usual Salesforce has a common complaint that is eaily fixed. should have been resolved in design and they do nothing about it.  Lot of overlooked issues. I solved this with adjusting thier CSS from this:

.slds-dueling-list__column_responsive {
    flex: 0 1 var(--lwc-sizeSmall,15rem);
    flex-wrap: wrap;
    overflow: hidden;
    min-width: var(--lwc-sizeXxSmall,6rem);
}

to this:

.slds-dueling-list__column_responsive {
    flex: 1 1 var(--lwc-sizeSmall,15rem);
    flex-wrap: wrap;
    overflow: hidden;
    min-width: var(--lwc-sizeXxSmall,6rem);
}

To do this I added a static resource with the new CSS called CustomCSS. Then I created a Custom Lightening component with this code:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <ltng:require styles="{!$Resource.CustomCSS}" />
    <lightning:card iconName="standard:account" title="Enkode LLC Custom style :)">
    </lightning:card>    
</aura:component>

Then I added the new component to the Lightening Page. And easy peasy very simple... LOL 
JAVED AHMED 1JAVED AHMED 1
https://rajvakati.com/2018/02/18/usage-of-lightningduallistbox/(its a copy but my requirement same like this)

i need this funtinality with lwc
can someone plzz help me

thanks in advance