Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

UI issue: Color picker as last in array of fields = unscrollable #7092

Open
Sfolkerts89 opened this issue Feb 6, 2024 · 0 comments
Open
Labels
type: bug code to address defects in shipped code

Comments

@Sfolkerts89
Copy link

Cant scroll page
When the "Color" widget is the last widget in an array of widgets, opening the picker opens the pop up below the widget. This results in addtional scroll height of div class "css-195712k-PreviewPaneContainer-ControlPaneContainer".
When the color picker is open, mouse wheel scroll only reacts when hovering within div "ColorPickerContainer".

To Reproduce

  1. Create a random array of widgets that take up more then 150vh
  2. Set widget "Color" as the last in the array
  3. Open color widget and try to scroll when NOT hovering over the widget

Expected behavior
Scroll response within the entrie editor page

Screenshots
1: Color picker at the end of the page
1
2: Color picker openen, no scroll response on hover outside of the picker container
2
3: Scrolled to bottom, hovering over the picker container; notice lack of margin on the bottom
3

Cause
The "ClickOutsideDiv" container is stopping scroll input to "PreviewPaneContainer-ControlPaneContainer"

Possible quick ('n dirty) fix
Adding a padding-bottom of around 160-200px to "PreviewPaneContainer-ControlPaneContainer" would make user scroll down further, then the color picker would not open outside of the viewport. (I'd add an additonal 100px padding-top to the same parent container as well, just for supported looks.

Or well, add an event listener to that parent element when the picker is open.

@Sfolkerts89 Sfolkerts89 added the type: bug code to address defects in shipped code label Feb 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug code to address defects in shipped code
Projects
None yet
Development

No branches or pull requests

1 participant