Single select drop down items cut off my bottom of modal even when choices has a higher z-index

[James4645]

Describe the bug I have a choices single select box in a modal. The options when the select is open is longer than the modal is tall. Currently the list gets cut off at the bottom of the modal. The modal has a z-index of 10. I tried changing the z-index in choices.css from 1 to 11 but it still is cut off.

To Reproduce Steps to reproduce the behavior:

1. Add a choices single select near the bottom of a modal with more options than can fit in the remaining height of the modal.
2. Apply a z-index of 10 to the modal and a z-index of 11 in choices.css
3. open the modal then open the choices dropdown

Expected behavior This dropdown list of options should extend beyond the bottom of the modal just like a native select element.

Screenshots

Desktop (please complete the following information): Tested on:

• OS: Windows 11
• Browser: Firefox
• Version: 99.0

and

• OS: Windows 11
• Browser: Edge
• Version: 100.0.1185.29

[BibbyChung]

I have the same problem. I fixed it by changing the modal overflow to visible. ^^...

[stwlam]

I think the only way to reliably solve this problem is to have the input element and dropdown as a direct child of the document body. That way it can't fall victim to HTML stacking contexts.

[razvanFrandes]

You can't. Dropdown is relative to it's parent, and the parent relative to it's modal. The html of the dropdown must be at least a html sibling of the dropdown, what you can do is move the whole choice html to bottom of the body tag, with a position absolute, then get the coordinates of the place you want to put the choice and set the position acordingly.