gentics / gentics/mesh-ui

Right-Panel is overflowing during form-edit

Open
#337 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
24
Forks
27
PR merge metrics
No merged PRs in 30d

Description

### Right-Panel is overflowing during form-edit.

If the height of the form-body is too large, the right-panel starts to overflow and adds unused space at the bottom of the container. The issue only appears if the form contains boolean fields.

![image](https://user-images.githubusercontent.com/73655791/100085712-ab398d80-2e4c-11eb-8198-f519732de1fd.png)

### Browser
Firefox 83.0 (64-bit)
The problem seems not to appear with the chrome browser.

### Cause

The problem is produced by the styling of gtx-checkbox.
```
gtx-checkbox [type="checkbox"]:not(:checked), gtx-checkbox [type="checkbox"]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}
```

The editor-body is static positioned, thus the checkbox-element is anchored outside of the editor-body causing the right-panel to overflow.

A possible fix would be adding `position: relative` to the `mesh-boolean-field` to provide an anchor inside the editor-body.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the gtx-checkbox styling and the mesh-boolean-field used by the form editor. Reproduce the issue in Firefox with a tall form containing boolean fields, then verify that the right panel no longer overflows or leaves unused space at the bottom.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.