Hiding Elements after rendering causes the toolbox position to be incorrect

[moomoo-dev]

Describe a bug.

Steps to reproduce:

1. Add this to tool to your config button.js
2. Add button to screen
3. Fill out fields
4. Click Tune icon for button
5. Click the square with plus icon
6. Toolbar position is not at the top of the screen

Expected behavior:
Toolbar should be where the button starts

Screenshots:

Device, Browser, OS:

Chrome, Firefox,

Editor.js version:

@editorjs/editorjs": "^2.31.0

Plugins you use with their versions:

"@editorjs/editorjs": "^2.31.0",
"@editorjs/list": "^2.0.9",
"@editorjs/paragraph": "^2.11.7",
"@editorjs/table": "file:table",

[neSpecc]

What does this tool actually do? Can we see its homepage instead of a direct link to the JS file?

[moomoo-dev]

I'm not sure what you mean the homepage? Are you asking for a demo page ?

[neSpecc]

Maybe the repository, if it is publicly available.

[neSpecc]

If it is your tool and it is a Block Tool, try calling the dispatchChange method of Block API

[moomoo-dev]

No the repo isn't public The tool is apart of my companies repo. Thats why I added the file. I'll try to make a repo to show you because I think it's something bigger.

[moomoo-dev]

Here is the repo.. I made it even simpler.

• When the two hidden labels are above the button it breaks the positioning of the tool bar.
• To see if fix you can open the developer tools, and delete the two labels that hold the inputs and it fixes the position.

Repo
https://github.com/moomoo-dev/table

[moomoo-dev]

My work around right now is to just delete and recreate the markup as needed. I would prefer to just add a class that can hide and show them, but I know position in javascript is a pain. So I'm not sure how long it will take, but if you do need more help with debugging this let me know. I'm more than happy to help.