decaporg / decaporg/decap-cms

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

Open
#7,092 0 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**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](https://github.com/decaporg/decap-cms/assets/66568538/eb59a02b-906e-49b1-bbf0-659e78efcf97)
2: Color picker openen, no scroll response on hover outside of the picker container
![2](https://github.com/decaporg/decap-cms/assets/66568538/e769fc34-8c73-4a32-8fdd-b24b03c21c3d)
3: Scrolled to bottom, hovering over the picker container; notice lack of margin on the bottom
![3](https://github.com/decaporg/decap-cms/assets/66568538/91f01a6c-44a7-4ca7-836e-3a13b88465e7)

**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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.