Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tui editor table popup selector box not aligning with the toolbar table button #151

Closed
chas2015 opened this issue Apr 17, 2018 · 5 comments

Comments

Projects
None yet
4 participants
@chas2015
Copy link

commented Apr 17, 2018

Version

version 1.0.6

Test Environment

Windows 10 on Chrome

Current Behavior

  1. Place the tui editor on a page that the page is large enough to scroll vertically.
  2. Scroll down from the top of the page so the scroll bar is not all the way up.
  3. Click on the table button on the toolbar.

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.

Expected Behavior

The popup table selector should always align with the toolbar table button.

@chas2015

This comment has been minimized.

Copy link
Author

commented Apr 17, 2018

The table selector popup also has selection issue. I can only select up to 2 rows and the column selection is not working properly either.

@vpapadopou

This comment has been minimized.

Copy link

commented Apr 19, 2018

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 tui-popup-wrapper class use the following options:

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.

@galvarez421

This comment has been minimized.

Copy link

commented May 15, 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:

scrolled-to-top

After clicking headings button when page is scrolled down:

scrolled-down

@kyuwoo-choi

This comment has been minimized.

Copy link
Member

commented May 16, 2018

Currently, popups are fixed position.

option 1

  • dismiss popups on scrolling

option 2

  • popups absolute position relative to toolbar element.

@kyuwoo-choi kyuwoo-choi reopened this May 16, 2018

@vpapadopou

This comment has been minimized.

Copy link

commented May 16, 2018

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.
https://getbootstrap.com/docs/4.0/components/dropdowns/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.