I have an issue where the overflow of a scrollable list on a website is cutting off my dropdown menu. The scrollable list has a height constraint because it is in a modal which has a set height and width.

The dropdown has about 11 items so it is fairly big, so any alternatives would have to accommodate for those items.

I have attached an image to help further explain the issue.

Overflow dropdown issue

closed as unclear what you're asking by Madalina Taina, locationunknown, Wanda, Shreyas Tripathy, JonW Jul 30 at 9:56

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • I don't quite catch your meaning. Did you mean that the first model consists of 11 items but because of the below list model it can now only show 4? And you want the first model not to be cut off? – Danlin Chen Nov 12 '18 at 7:17
  • Yes thats what I mean – Darian Nov 12 '18 at 9:37
  • Let us know what this UI screen is and what's in it. What are users supposed to be doing? What is in the scrollable list? What's in the other two sections? – moot Nov 12 '18 at 13:07

The scrollable list needs to be above the layer of the modal, by that way it will expand above the modal containing it.

enter image description here

moreover it is not necessary that dropdown should expand below only, you can expand it from above also, as done in example

Not the answer you're looking for? Browse other questions tagged or ask your own question.