When TinyMCE version 5 is placed inside a CSS grid layout, the toolbar labels are displaying vertically.
It appears that the "width:auto" property is not being applied correctly, and I am struggling to find a solution to fix it.
I would greatly appreciate any suggestions on how to resolve this issue.
https://i.sstatic.net/htWYJ.png
.hg_grid {
display: grid;
grid-template-areas: "header header" "navigation main" "footer footer";
grid-template-columns: 200px minmax(0, 1fr);
column-gap: 20px;
grid-template-rows: 100px 1fr 50px;
min-height: 100vh;
}
.hg_grid header {
grid-area: header;
background: #cccccc;
}
.hg_grid footer {
grid-area: footer;
background: #cccccc;
}
.hg_grid main {
grid-area: main;
background: #e0e0e0;
}
.hg_grid aside {
grid-area: navigation;
background: #b7b7b7;
}<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>TinyMCE - Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"></script>
<script>
tinymce.init({
selector: '#mytextarea'
});
</script>
</head>
<body 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>
</body>
</html>For reference, here's the above example on Codepen: https://codepen.io/dezertdezine/pen/QYrLKV