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
sarthak nigam 3sarthak nigam 3 

I am trying to resize my duallist box with help of size option in lightning and it is not working

 <lightning:dualListbox  label="Some field" name="some name" 
                       sourceLabel="Available"
                       selectedLabel="Chosen"
                       options="{!v.options}"
                       onchange="{!c.handleChange}"
                       size="20"
Best Answer chosen by sarthak nigam 3
Deepali KulshresthaDeepali Kulshrestha
Hi Sarthak,

Your code only increases the length of duallistbox.

Try this:-
 
<lightning:dualListbox name="some name"
                           label= "Some field"
                           sourceLabel="Available"
                           selectedLabel="Chosen"
                           fieldLevelHelp="This is a dual listbox"
                           options="{!v.options}"
                           onchange="{! c.handleChange }"
                           min="{!v.min}"
                           max="{!v.max}"/>

Or you can try this:-

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%;
} 

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
 

All Answers

Raj VakatiRaj Vakati
Use Class attribute by writing you styles for width. 

https://developer.salesforce.com/forums/?id=9060G0000005WhcQAE

  
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}"
                           
                           />

 
Raj VakatiRaj Vakati
You can write your own styles with css importance options also 
Deepali KulshresthaDeepali Kulshrestha
Hi Sarthak,

Your code only increases the length of duallistbox.

Try this:-
 
<lightning:dualListbox name="some name"
                           label= "Some field"
                           sourceLabel="Available"
                           selectedLabel="Chosen"
                           fieldLevelHelp="This is a dual listbox"
                           options="{!v.options}"
                           onchange="{! c.handleChange }"
                           min="{!v.min}"
                           max="{!v.max}"/>

Or you can try this:-

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%;
} 

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
 
This was selected as the best answer
sarthak nigam 3sarthak nigam 3
Thanks for your response. It has helped me to fix the issue.
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 mark as Best Answer