Dropdown doesn't pay attention to the viewport

[kglickman]

Detailed description

If the popup for a Select or Datepicker wouldn't fit in the viewport, they are moved/adjusted appropriately so they fit.

This is not the case for DropDown, Combobox, or MultiSelect. If you place them at the bottom of a page, the will cause a scrollbar to get added to the page when the popup is opened and then disappear when it's closed.

For Tooltip, you can specify the position but that is not helpful if you don't know where the tooltip will appear on the page.

Our product allows the admins to put their controls where ever they want, so we need them all to work well at the bottom of the page.

What browser are you working in?
Chrome, IE11

What version of the Carbon Design System are you using?
"version": "8.16.1",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
OpenPages

Steps to reproduce the issue

Place a Dropdown near the bottom of the page. See the scrollbars show up on the page, even though there is plenty of room to display the dropdown elsewhere.

Additional information

• Screenshots or code
• Notes

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized. This will help us to better understand and address your issue.

[asudoh]

Auto-detection of available viewport height is something that’s out-of-the-scope of current dropdown implementation, but wondering if we should allow “dropup” style (e.g. with bottom: 2.5rem on .bx—dropdown-list) - CC @carbon-design-system/design @carbon-design-system/ui

[tay-aitken]

@asudoh could you elaborate on or add a picture of what a dropup looks like? I'm not familiar with it. Thanks!

[alisonjoseph]

@tay-aitken I think he just means having the option for the dropdown to open up instead of down.

[bsonefeld]

I wouldn't recommend this pattern. It's not something I've seen and I worry it will cause confusion with users, who typically expect the Dropdown to open down.

[alisonjoseph]

Material Design actually recommends this if you scroll down on this page.

When close to a screen edge, simple menus reposition their vertical alignment so that all menu items are completely visible.

https://material.io/guidelines/components/menus.html#menus-simple-menus

And you can see it in action here on this React implementation of material
http://www.material-ui.com/#/components/dropdown-menu

That being said, implementing something like this where it is aware of the screen edge is definitely not simple and out of scope the way dropdowns are currently built. I'm not sure just giving the option to change the styles is the best approach.

[bsonefeld]

@tay-aitken Thoughts on implementing this pattern for just the Basic Dropdown, but all others, the drawer opens on bottom?

[tw15egan]

I think @asudoh's solution is a nice meet-in-the-middle. We can support this variation via css styles (bottom: 2.5rem on .bx—dropdown-list) and leave it up to the end user to determine whether or not to add this class based on where on the viewport the element is clicked