When TinyMCE v5 is place inside a CSS grid, the toolbar labels display vertically.
It seems like "width:auto" isn't being applied, but I'm unable to find a way to fix it.
I'd be grateful of any suggestions to resolve this.
.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>NAV</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>
Here's the above example on codepen:
https://codepen.io/dezertdezine/pen/QYrLKV
i had the same problem, fixed it by adding this to my css:
.tox {
white-space: nowrap!important;
}
Related
I am new to html and css and I am trying to build a banner that when the window narrows, it will hide the text instead of pushing it to the next row.
I have overflow included but didn't seem to work. The link "order history" gets pushed to another row.
Before windows narrows
After windows narrows and order history becomes stacked
Here are my codes, thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keyword" content="mil-spec, fabrics">
<title>Whittier Fabrics</title>
<link href="WhittierFabricMainPage_Stylesheet.css" rel="stylesheet"/>
</head>
<body>
<header class="site-header">
<div class="site-header_wrapper1">
(626)202-3312
Email Us
Login
</div>
<div class="site-header_wrapper2">
<img src="logo.svg" alt="Whittier Fabrics"/>
<input type="text" class="search" placeholder="Search..">
<div class="bottom-row">
Order
Order History
</div>
</div>
</header>
</body>
</html>
#charset "utf-8";
.site-header_wrapper1{
flex: 1;
display: flex;
justify-content: flex-end;
width: 800;
}
a{
padding: 8px;
}
.site-header_wrapper2{
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.bottom-row{
display: flex;
justify-content: flex-end;
}
.brand, .search, .bottom-row{
flex: 1;
}
.button{
display: inline;
}
I added overflow: hidden in CSS but didn't work.
I tried to use the following html where I removed the div class "bottom-row" and it worked, but I am wondering, if I wanted to keep the div class "bottom-row" as I originally had, how can I keep the links hidden?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keyword" content="mil-spec, fabrics">
<title>Whittier Fabrics</title>
<link href="WhittierFabricMainPage_Stylesheet.css" rel="stylesheet"/>
</head>
<body>
<header class="site-header">
<div class="site-header_wrapper1">
(626)202-3312
Email Us
Login
</div>
<div class="site-header_wrapper2">
<img src="logo.svg" alt="Whittier Fabrics"/>
<input type="text" class="search" placeholder="Search..">
Order
Order History
</div>
</div>
</header>
</body>
</html>
As you can see in the code snippets below when the size of the web page reaches 776px it becomes column like aligned but it isn't directly aligned under each other. I have added the align-items property, How do I directly align the elements under each other?
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
align-items:center;
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
You could use the align-text attribute in this case:
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
text-align: center; /* changed this line */
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Or if you want them centered but justified on the left, you can set the width of the container to fit-content, then center the whole container by setting margin: 0 auto;:
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
width: fit-content;
margin: 0 auto;
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Setting a fixed width would solve this, but it can be problematic if your content size is variable.
As an alternative, you can add another container (.demo in this example) to avoid having to specific any width. Here we centre the content with the outer container, and left align the content in the new inner flex container:
.banner-content-container {
display: flex;
padding-top: 200px;
justify-content: center;
}
.demo {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#media screen and (min-width:776px) {
.demo {
flex-direction: row;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="banner-content-container">
<div class="demo">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</div>
</body>
</html>
The reason is that they are centered but have different width.
The quick fix for this is to set the same width when they are in flex column mode.
#media screen and (max-width:776px) {
.banner-content-container {
align-items: center;
flex-direction: column;
}
.content {
width: 250px;
}
}
display:flex;
flex-direction: column;
Should be together in your media query. Because by default, display:flex is a row.
was wondering if the following is possible using grid or flexbox.
I got a 3-column layout that I want to make responsive. Now, on the one hand I can use a media query to lets say make all 3 columns full width on <640px screens, but what if I want the first 2 to be 50/50 and the third one full width?
A possible solution could be to use a combination of a media query and :last-child, but I wonder if this can be done without the use of media queries?
Desktop
Mobile <641
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
body,
html {
padding: 0;
margin: 0;
}
.bg-color {
background-color: #ccc;
}
.bg-color1 {
background: #817e7e;
}
/* This is for three box Wrapper */
.my-row {
display: flex;
flex-flow: row wrap;
}
/* This is for three box */
.my-col {
flex: 0 0 33.333%;
width: 33.333%;
}
#media (max-width: 641px) {
.my-col {
flex: 0 0 100%;
width: 100%;
}
}
</style>
</head>
<body>
<div class="my-row">
<div class="my-col bg-color">
<h1>Col 1</h1>
</div>
<div class="my-col bg-color1">
<h1>Col 2</h1>
</div>
<div class="my-col bg-color">
<h1>Col 3</h1>
</div>
</div>
</body>
</html>
I want the grid to be no bigger than 3X3 and then scroll the rest.... Looks great for 9 boxes and less lol!!
This is the look I like but I'm only deriving with 9 boxes or less:
Wanted
However anything other than 9 gives me this:
not wanted
column-count: 3:
not wanted
.container{
height: 70vh;
width: 80vw;
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: scroll;
}
.container::-webkit-scrollbar {
display: none;
}
.box{
margin: 2%;
background-color: blueviolet;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css">
<title>Routing🖥️</title>
</head>
<body>
<div class = "container">
{% for i in range(num) %}
<div class = "box">hi</div>
{% endfor %}
</div>
</body>
</html>
Objective: Only show the 3X3 and scroll the rest (at the same size).
Please help me fix my overflow /not overflowing problem lol.
There is some problem with your code. you used -webkit-scrollbar and made the container display none. So, The scroll bar is not showing.
Another thing is though you used grid layout you must add height to you box or all the boxs will shrink when there is more boxs. So, need to add height to box.
You can try this code below. Which is perfectly working.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css">
<title>Routing🖥️</title>
</head>
<body>
<div class = "container">
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
<div class = "box">hi</div>
</div>
</body>
</html>
CSS:
.container{
height: 70vh;
width: 80vw;
border: 1px solid black;
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: scroll;
}
.box{
height: 300px;
margin: 2%;
background-color: blueviolet;
}
Got it!
Works perfectly!
Webkit toolbar is to make the scrollbar display none. It is for Chrome. Love the look of the scrollbar being hidden.
I was able to specify height with minmax and grid-auto-rows did the trick for the implicity added rows.
Thanks for all your help!
Posted updated code and picture:
.container{
height: 70vh;
width: 80vw;
background-color: rgba(240, 248, 255, 0.2);
display: grid;
justify-content: center;
grid: repeat(3, minmax(150px,200px)) / repeat(3, minmax(150px,200px));
grid-auto-rows: minmax(150px,150px);
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: scroll;
}
.container::-webkit-scrollbar {
display: none;
}
.box{
margin: 2%;
background-color: blueviolet;
}
Initial
On Scroll
I have been trying to get the borders on elements that are touching to merge... I thought that border-collapse would be a straightforward solution to this... but apparently not, or I am misusing it.
Here's my code...
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
<link href="style.css" rel="stylesheet">
<title>Responsive Grid</title>
</head>
<body>
<div class="container">
<nav>Navbar</nav>
<main>Main</main>
<div id="sidebar">Sidebar</div>
<div id="content1">Content1</div>
<div id="content2">Content2</div>
<div id="content3">Content3</div>
<footer>Footer</footer>
</div>
</body>
</html>
style.css:
body {
box-sizing: border-box;
}
.container > * {
border:green 1px solid;
border-collapse:collapse;
}
.container {
display:grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
I am still getting the appearance of 2px borders where elements meet.
Thanks for any help... I've looked around at a few threads but I'm not finding answer. Again Thanks!
This snippet works for the particular case (7 elements in a 4 column grid) given in the question by using the (simplistic) method of making various borders transparent so there is no doubling up:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
<link href="style.css" rel="stylesheet">
<style>
body {
box-sizing: border-box;
}
.container > * {
border:green 1px solid;
position: relative;
overflow: visible;
}
.container > *:nth-child(2), .container > *:nth-child(3), .container > *:nth-child(4), .container > *:nth-child(6), .container > *:nth-child(7) {
border-left-color: transparent;
}
.container > *:nth-child(5), .container > *:nth-child(6), .container > *:nth-child(7) {
border-top-color: transparent;
}
.container {
display:grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
</style>
<title>Responsive Grid</title>
</head>
<body>
<div class="container">
<nav>Navbar</nav>
<main>Main</main>
<div id="sidebar">Sidebar</div>
<div id="content1">Content1</div>
<div id="content2">Content2</div>
<div id="content3">Content3</div>
<footer>Footer</footer>
</div>
</body>
</html>
More sophisticated attempts that would work in the general case- pseudo elements overwriting border of previous sibling element for example - only work in theory as the placing of single pixels can vary on different displays so results could be half a (CSS) pixel out for example.