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.
