gentics / gentics/mesh-ui

Label-Container overflow in micronode-lists

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

Description

### Problem
The "sticky"-position of the label-container is not really suitable for micronode lists. If the list of alllowed microschemas is too long the list becomes larger than the screen and nodes at the bottom of the list can no longe be picked.

### Example
![image](https://user-images.githubusercontent.com/73655791/100362420-b0890a80-2ffb-11eb-98d9-75b9016cf04c.png)

This bug is also related to https://github.com/gentics/mesh-ui/issues/313. Due to the fixed position, the label list is no longer within the normal document flow. This causes microschemas with long names to overlap with the list-container.

![image](https://user-images.githubusercontent.com/73655791/100362742-16759200-2ffc-11eb-96cb-55c391e89f16.png)

### Possible solutions

Probably the easiest solution would be to disable the sticky-position for micronode lists. A more sophisticated solution may be to offer the allowed microschemas within a popover/dropdown-component. This could lead on the other hand to issues with the drag&drop-logic of the lists.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing a micronode list with many allowed microschemas and long names, then inspect the label-container and list-container behavior described here and in issue #313. The work is done when every node remains visible and selectable without the label list overlapping the list, while drag-and-drop still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.