Big dropdowns are unusable when used inside an `overflow:scroll` container, due to being constrained inside it
Created by: ronjouch
Problem
When using a Bootstrap (4.0.0beta) Dropdown in an element that is a child of an overflow:scroll
element, the dropdown is "stuck" inside the container, making it unusable if the dropdown contents are too big horizontally/vertically:
Contrarily, a vanilla HTML <select>
will merrily bleed out of the overflow:scroll
element as necessary:
See demo at JSFiddle/ronj/t6z6Lnfb.
Use case
A few words on the use case justifying this combination, as shown in the JSFiddle which mimics a webapp I'm working on:
- In the left sidebar live a set of filters. It may contain several filters that will consume undetermined vertical space, thus lives in an
overflow-y:scroll
div. Each filter has a dropdown which lets users modify filter options. - In the right pane lives the content, filtered by the filters in the left sidebar.
→ As a user,
- I do need that
overflow-y:scroll
sidebar scrolling behavior (because the list of filters is of undetermined and potentially large height, depending on the number of filters) - But filter dropdowns (which can be large, both in width due to length of options and height due to count of options) should be able "escape out of" / not be constrained by the sidebar.
And as shown in the demo/screenshots, vanilla HTML <select>
don't suffer from this problem, but it's not always practical/possible to revert back to using them, e.g. due to using features specific to Bootstrap Dropdown, or for consistent styling.
Details
Bootstrap version: 4.0.0-beta
OS/Browser: Ubuntu 16.04.3 / {Chrome 63, Firefox 58}
This issue is a follow-up to SO / Letting a bootstrap b-dropdown
escape out of an overflow:scroll
container, but noticing regular <select>
are not affected, it starts to look like a bug, thus this issue. Sorry for the noise if I'm missing something obvious / if there's a workaround / if this is a known problem tracked in an existing issue.
Thanks