[question] Dropdown: adjust dropdown menu height and content overflow

I’m working to accommodate mobile devices in my application, and we have various large dropdown lists to render. From pretty much any point on the page, our dropdown menus exceed the page size. Unfortunately, this isn’t a scrollable page, but more of the mobile-app style with full screen content.

Is there a good way to apply some styling to control menu size and overflow? I imagine I could just apply some more nested css selectors (although I’ve been going strong with flat classes thus far):

.my-component .dropdown-menu {
  max-height: $really-tiny-mobile-menu-height;
  overflow-y: scroll;

  @media (min-width: $not-tiny-mobile){
    // media query stuff
  }
}

But beyond that, any ideas for calculating height based on the position of the element on the page and the size of the page? Maybe just use a mounted hook to grab an element position, and yada-yada some size calc logic? Seems a bit manual. Thoughts?

[alexsasharegan]

I’m finding some interesting data by using element.getBoundingClientRect(). Among the object props returned are the x, y, w, & h of the element relative to the viewport.

[tmorehouse]

No objections.

I’ll post the CSS here once I find it