Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
Tui editor table popup selector box not aligning with the toolbar table button #151
Windows 10 on Chrome
The popup table selector box is not aligning with the toolbar button. Depend on how big the page is, the popup table selector may even go out of view.
The popup table selector should always align with the toolbar table button.
To anyone who is interested in fixing this, here is a probable solution:
Group the buttons and the menus together under one div like:
<div> <button class="tui-heading tui-toolbar-icons" type="button"></button> <div class="tui-popup-wrapper te-heading-add"></div> </div>
Then for the
position: absolute; top: 31px; left: auto;
That way the popup will align relatively to the div and not relatively to the whole document, which is generally a bad thing to do.
referenced this issue
Apr 23, 2018
As of 1.1.1, I am still experiencing incorrect positioning for the headings dropdown/popup.
As described in the OP, the issue appears to occur when the page is scrolled down (see images below).
After clicking headings button when page is scrolled to top:
After clicking headings button when page is scrolled down:
FYI This problem also occurs when placing the editor inside a bootstrap modal.
One good idea would be to check how bootstrap does it in terms of css and html code. It creates a "button group" div that includes the button along with the dropdown. That way the dropdown cannot be placed far away from the button.