Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[BUG REPORT]: Dropdown Component MaxHeight Causing Offscreen Overflow #121

Open
lucasb16-exe opened this issue Nov 9, 2021 · 1 comment
Labels
bug Something isn't working needs reassessment

Comments

@lucasb16-exe
Copy link

Describe the bug

On certain workstations and browser configurations, even in fullscreen, dropdown component as utilized in https://github.com/USACE/instrumentation-ui/blob/develop/src/app-pages/collectiongroup/collectiongroup-timeseries-picker.js and other app-page files will cause items to be inaccessible on overflow.

Steps To Reproduce

  1. Go to a collection group in a project with an amount of timeseries that would hit the 400px MaxHeight css property specified in https://github.com/USACE/instrumentation-ui/blob/develop/src/app-components/dropdown.js
  2. Attempt to add a timeseries to the collection group via the timeseries picker UI component
  3. Scroll down the list to the bottom of overflow
  4. See error

Expected behavior

Overflow of items in dropdown component allows all items to be selectable

Actual behavior

Overflow of items in dropdown component causes certain timeseries to not be selectable.

Screenshots

dropdownoverflow

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: 95.0.4638.69 (Official Build) (64-bit)

Additional context

See comment for suggested fix

@lucasb16-exe lucasb16-exe added the bug Something isn't working label Nov 9, 2021
@lucasb16-exe
Copy link
Author

lucasb16-exe commented Nov 9, 2021

Suggest value of maxHeight css attribute on line 97 of src/app-components/dropdown.js :
<div className={menuClass} aria-labelledby={${id}MenuButton} ref={menuRef} style={{ maxHeight: '400px', overflow: 'auto' }}>

be changed to :

<div className={menuClass} aria-labelledby={${id}MenuButton} ref={menuRef} style={{ maxHeight: '700%' overflow: 'auto' }}>

using a percentage rather than a pixel value should mitigate issue on most configurations, locally on more than one device

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug Something isn't working needs reassessment
Projects
None yet
Development

No branches or pull requests

2 participants