0

How to make the dropdown appear properly for this lightning select.. It is an iteration. The option data is large that's why the width is getting increased. This issue is coming for all components where the data is the dropdown is large.

<aura:if isTrue="{!and(v.fieldsAccessibility.industryProfession != undefined, v.fieldsAccessibility.industryProfession != 'Hidden')}">
<div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-4 slds-p-horizontal--small" aura:id="industryProfessionContent">        
    <lightning:select class="{!v.fieldsAccessibility.industryProfession == 'ReadOnly' ? 'slds-output' : ''}" 
                      name="Nature of Industry" label="Nature of Industry"  aura:id="industryProfession" disabled="{!v.fieldsAccessibility.industryProfession  == 'ReadOnly'}" 
                      value="{!v.EmploymentDetail.Industry_Profession__c}" required="{!v.fieldsAccessibility.industryProfession == 'Readonly' ? true: v.fieldsAccessibility.industryProfession == 'Required' ? true : v.isReadOnly ? true:false}" messageWhenValueMissing="This field is required"
                      onchange="{!c.validateField}">
        <aura:iteration items="{!v.industryProfessions}" var="industryProfessions">
            <option selected="{!v.EmploymentDetail.Industry_Profession__c == industryProfessions.value}"  class="slds-truncate " value="{!industryProfessions.value}">
                {!industryProfessions.label}
            </option>
        </aura:iteration>
    </lightning:select>
    <span aura:id="industryProfessionsError" class="slds-form-element__help"></span>     
</div>

In the below images, the lead source dropdown has small amount of data, hence the width is correct.. For other 2 dropdown the length of data is more, that's why the width is increased.

enter image description here

enter image description here enter image description here

2
  • 1
    Without seeing your code, not sure how to help you. The standard design for select lists doesn't expand like this, so you might be doing something wrong, but without code, there's no way to know what went wrong.
    – sfdcfox
    Jan 30, 2021 at 11:01
  • Added the cmp code.. There is no css styling attached to slds-truncate. tried to remove truncate as well still no luck.
    – PiK
    Feb 1, 2021 at 6:54

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.