react-magma icon indicating copy to clipboard operation
react-magma copied to clipboard
verified publisher icon cengage

Dropdowns Update: Viewport detection/positioning

Open joasmi723 opened this issue 4 years ago • 1 comments

Purpose: Allow dropdowns to reposition intelligently based on viewport/window.

Possible sources for reference:

https://coreui.io/docs/components/bootstrap/dropdowns/#overview https://popper.js.org/ If there isn't enough room for the dropdown menu to display in the position it's supposed to, then it will automatically move to the opposite position. Example: down position will move to the up position when there isn't enough space below the button.

Note: Popper is now implemented on the React Magma tooltip component

Here's a list of the components that need this functionality added to them:

  • Combobox
  • Date picker
  • Dropdown
  • Select

joasmi723 avatar Jan 05 '21 20:01 joasmi723

Reference:

PR with Floating UI https://stash.cengage.com/projects/TRUST/repos/fx-ui/pull-requests/1537/diff#src%2Fcomponents%2Froutes%2FSearch%2Fcomponents%2FFilterDropdown.tsx

silvalaura avatar Sep 05 '24 14:09 silvalaura

Confirmed the changes behave as expected for:

  • Dropdown ✅
  • Combobox ✅
  • Select ✅
  • DatePicker ✅

silvalaura avatar Oct 21 '24 18:10 silvalaura