I have a small dialog that asks users to make a specific time range selection from a dropdown before proceeding with the action. My problem is that regardless of whether I display the dropdown above the input or below the input, it will extend past the height of the dialog either way. Is one better than the other (above or below)?

enter image description hereOr should I scrap that entirely and do something else?

  • Are you going to have only those 5 options? Why not use alternatives to the dropdown, such as a range slider or chips for those options? Apr 17 at 7:23
  • What exactly is the issue? Is it a matter of aesthetics: it doesn't look good. Or do you expect other problems with this? I see this happen quite often in my work and it never showed up as a problem in usage or testing.
    – GWv
    Apr 17 at 8:18
  • Basically the problem is that it feels wrong to have a dropdown extend past the boundaries of the dialog Apr 17 at 18:51

1 Answer 1


A good (dropdown) menu expands in the direction where there is space depending on scroll position.

This is what the native <select> element does.

If the toggle is close to the bottom edge of the viewport, it should expand to the top. If it’s close to the top edge, it should expand to the bottom.

If that’s not feasible, and per default, it should open to the bottom, so that the label stays visible.

The following two screenshots demonstrate that.

A dropdown opening to the top, because

The same dropdown opening to the bottom

  • Thank you, that is helpful. Apr 17 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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