0

I am using a combobox inside a modal and I have a problem. You see, when I want to pick a value for the combobox, the dropdown list is shown under it, inside the modal container. And because the modal is small, the user has to scroll inside the modal to pick their value. Very unpractical.

I was wondering if there was any way that the picklist would show "above" the container, in order to see the values without making the modal bigger or having to scroll inside it. I read the documentation on the component but

See the playground below to understand what I mean. Just click on the button to show the modal, and try to select a value for the combobox.

Playground

Notice that it's even unusable if you add dropdown-alignment="bottom-left" to the combobox tag.

In any case, thanks for stopping by.

2 Answers 2

1

This is duplicate to Styling lightning:combobox drop down to not hide inside modal and extend modal length?

try using this in your CSS file.

:host .slds-modal__content{ overflow: initial; } 
1
  • 1
    Apparently I had a weird way to phrase it since I didn't find that post, thank you for plugging it in. You also need to mark the combobox as position: absolute Commented Dec 3, 2020 at 9:26
0

This solution will not work when you have scrollable content in the modal. if we add this style, if content size is increasing modal height will also increase and ends up with modal will go outside of screen.

This is the problem within the platform itself.

We have discovered the similar behavior on the Data Cloud Identity Resolution screen and SF Support suggested to create an Idea for this

This is the idea I have created

https://ideas.salesforce.com/s/idea/a0B8W00000QeotdUAB/fix-the-modal-css-picklist-dropdown-field-hiding-under-bottom-panel-bug

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.