I have a lightning-record-edit-form allowing the edit of 3 lightning-input-fields displayed in a modal.

The third field is a picklist:


so when clicked on the options get clipped and the user has to understand that they must scroll to see all the options:

modal clicked on

I was thinking of re-sizing when the picklist is opened but neither of these events appear to be generated:

lightning-input-field onclick={handleClick} onopen={handleOpen} ...

Any suggestions on how to improve the user experience for this case?

(What I've done to date is added some padding below the picklist so the picklist opening is more obvious but that isn't an elegant solution.)


1 Answer 1


Naveen's link solved this for me in that adding style="overflow: initial;" here:

<div class="slds-modal__content slds-p-around_medium" style="overflow: initial;">
    <lightning-input-field field-name="Title"></lightning-input-field>
    <lightning-input-field field-name="Description"></lightning-input-field>
    <lightning-input-field field-name="acl__Type__c"></lightning-input-field>

allowed the picklist values to expand outside the modal:

modal working

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .