Bootstrap: Handle dropdowns near edge of page where items might not be visible

[Mevrael]

• When .dropdown-menu have many dropdown-items
• and there are not enough space in viewport
• -> dropdown-menu itself is not scrollable and it is impossible to view dropdown-items out of viewport

Those 2 simple lines of CSS (without any JS) works like a charm

.dropdown-menu {
  overflow-y: auto;
  max-height: 80vh;
}

Even if it's not the best solution and still in some cases (large dropdown at the bottom of page but there should be a JS to show dropdown up not down) will fail, for most cases it will work and I think it's a good temporary option until someone will make an issue with his use case.

[mdo]

Why not remove elements from the dropdown menu, or try another design pattern altogether?

[cvrebert]

Does the page not resize itself to become slightly taller to fit the menu thus allowing access to the rest of the menu items via scrolling the page?

[cvrebert]

We're hopefully going to integrate Tether with the dropdowns, such that it would flip the direction of the dropdown menu in such cases where the items would otherwise go beyond the viewport.

[Johann-S]

Closed and fixed by #22444