search

gentics / mesh-ui

Gentics Mesh UI
https://getmesh.io
Apache License 2.0
23 stars 27 forks source link

Right-Panel is overflowing during form-edit #337

Open micstra opened 3 years ago

micstra commented 3 years ago

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

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.