codex-team / codex-team/editor.js

Issue: toolbars causing unwanted vertical scrolls

Open
#2,642 4 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
31.9k
Forks
2.2k
Avg merge
1d 1h
Merged PRs (30d)
1

Description

Describe a bug.

Steps to reproduce:

https://github.com/codex-team/editor.js/assets/52427793/c43dbb03-806b-4c58-b12c-84980b530c70
You can see that after I deleted inner toolbar element, scroll disappeared
This happens because toolbars are still taking some space, despite the position: absolute and visibility: hidden

![image](https://github.com/codex-team/editor.js/assets/52427793/3c349c64-4460-495a-af48-39b8114fcbf9)
Moreover, I'm expecting to see the displayed toolbox to be over the element with the red border, not to be hidden under it (maybe this is not always the expected behavior, so this is can be a configurable option), because in my experience usually different types of tooltips and floating menus are allowed to be drawn outside the related containers and they definitely shouldn't force them to grow/scroll
All this can be achieved by rendering toolbars under some special element under document's body, then we should just carefully position them. For sure it will also require some other changes like to make sure that click under these toolbars are not treated as clicks outside of the editor and etc.
![image](https://github.com/codex-team/editor.js/assets/52427793/326ad9f5-c848-4c12-9f6f-106f037d366d)
This is pretty much the same thing TinyMCE do with their toolbars: they are rendering toolbars outside of the editor's container, under some special element under document's body
It allows them to render their toolbar fully visible even if the toolbar is bigger than the maximum height available for the editor.

Browser, OS:
Windows, Chrome

Editor.js version: 2.29.1

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.