KPC
Kevin Powell - Community•6d ago
KesSaft

Select in Popup

Hey, I use the dialog element to create popups in react. I use these popups also for forms in which I use custom created selects. The problem. when I set no overflow on the dialog, it overflows on mobile devices and not the whole form is visible. when I set it to overflow-y: auto; it is scrollable, but the select dropdown is then no going outside the popup, which not only looks bad but also makes the user need to scroll down to the dropdown... The select just uses position relative and absolute on the dropdown. Is there a way to fix that? I would like to have the dialog scrollable when there is too high of a content in it, but the selects should still open on top and overflow the dialog. They would also then need to automatically adjust, so they don't overflow over the screen size.
1 Reply
Kevin Powell
Kevin Powell•6d ago
With the current solutions we have with overflow, if you are hiding the overflow, you're hiding all of the overflow, there isn't a way to say "all the content, except for this thing". Selects, and similar, are one of those things where it'd be nice if this wasn't the case... The general solution is to use a different wrapper for the overflow... something like: 
<dialog>
  <div class="dialog__content"> ... </div>
</dialog>
<dialog>
  <div class="dialog__content"> ... </div>
</dialog>
and then: 
dialog {
  position: relative;
}

.dialog__content {
  overflow: auto;
  width: 100%;
  height: 100%;
}
dialog {
  position: relative;
}

.dialog__content {
  overflow: auto;
  width: 100%;
  height: 100%;
}
Takes more than just that for it to work, but in doing this, positioned elements will be positioned elements are relative to the dialog, and not the div, so they can still overflow. That might not help you, it probably depends if you are your select menus custom ones that you created, or are they using <select> - if it's custom, you could probably go down this path if needed. Anchor positioning could also make it a lot easier, with the browser support caveat (though there is a polyfill).

Did you find this page helpful?