I'm working on creating a "textarea" with a toolbar that displays rich text content based on the HTML content stored in the background textarea. Here is an example of the HTML structure:
<div class="primary-content">
<div class="textarea-with-nav" id="outerWrap">
<div class="navbar">
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
</ul>
</div>
<textarea id="layer1"></textarea>
<textarea id="layer2"></textarea>
</div>
</div>
The current CSS style for this layout is as follows:
html, body {
margin: 0;
height: 100%;
}
.primary-content {
padding-top: 55px;
}
.navbar {
grid-area: header;
overflow: hidden;
background-color: #333;
width: 100%;
z-index: 1;
}
.navbar.site-nav {
position: fixed;
top: 0;
}
.navbar ul { list-style-type: none; }
.navbar ul li { display: inline; }
.navbar ul li a {
color: white;
padding: 8px 16px;
text-decoration: none;
}
.navbar ul li a:hover {
background-color: #555;
color: white;
height: 100%;
}
.textarea-with-nav {
transform: translate(50%);
width: 400px;
height: 300px;
position: relative;
border-radius: 5px;
border: 1px solid #ccc;
}
.textarea-with-nav > .navbar {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.textarea-with-nav > textarea {
border: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 396px !important;
height: 246px !important;
resize: none;
}
.textarea-with-nav > textarea:focus { outline: none; }
#outerWrap {
position: relative;
z-index: 0;
}
#layer1 {
position: absolute;
z-index: 1;
}
#layer2 {
position: absolute;
z-index: 2;
}
I want the two textareas to resize simultaneously when the front textarea, layer2, is resized. Additionally, if I resize the textareas horizontally, the navbar should also stretch to match the new dimensions of the textareas.
Does anyone know how to achieve this? Will this require JavaScript or is CSS sufficient?