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

TinyMCE v5 - When placed in a CSS grid layout, labels appear vertically #4821

Open
dezertdezine opened this Issue Feb 11, 2019 · 3 comments

Comments

Projects
None yet
3 participants
@dezertdezine
Copy link

dezertdezine commented Feb 11, 2019

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When placed in a CSS grid layout, labels appear vertically.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar.
Codepen example here:
https://codepen.io/dezertdezine/pen/QYrLKV

What is the expected behavior?
Labels should appear horizontally.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?
TinyMCE 5.0.0
Checked in Chrome 72 / Firefox 65
I'm new to TinyMCE, but I'm not seeing this behaviour in TinyMCE v4.9.2

@blackcathikari

This comment has been minimized.

Copy link
Contributor

blackcathikari commented Feb 12, 2019

Thank you for the Codepen! My initial guess is that this is caused by CSS grid and flexbox interacting badly, since we didn't use flexbox in TinyMCE 4. I'll log this for investigation.

@lnewson

This comment has been minimized.

Copy link
Contributor

lnewson commented Feb 21, 2019

If it helps, the cause here looks to be the actual css being used in conjunction with how the menu items, etc... are added to the DOM. TinyMCE 5 adds a "sink" element to the end of the body, which then is used to position all floating elements.

So what's happening is the grid css doesn't allow for the additional dom elements, which then causes the sink element to have a width of 0px. So if you instead wrap the content in a div and move thehg_grid class to that div then it works as expected. eg:

<body>
  <div class="hg_grid">
    <header>
        <div>
            HEADER TINYMCE TEST
        </div>
    </header>
    <aside>
        <nav>
            <ul>
                <li><a href="#">NAV</a></li>
            </ul>
        </nav>
    </aside>
    <main>
        <h1>TinyMCE Inside CSS Grid Test</h1>
        <form method="post">
            <textarea id="mytextarea">Hello, World!</textarea>
        </form>
    </main>
    <footer>
        <p>FOOTER</p>
    </footer>
  </div>
</body>
@dezertdezine

This comment has been minimized.

Copy link
Author

dezertdezine commented Feb 21, 2019

Thanks for the explanation. That fix does indeed work, but for now I'm going to stay with v 4.9.3 until v 5 is more mature.

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.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.