Resize several elements simultaneously

问题

I am trying create a "textarea" with a toolbar, to display rich text content based on the html content stored on a textarea in the backgroud. the html is just like that:

    <div class="primary-content">
        <div class="textarea-with-nav" id="outerWrap">
            <div class="navbar">
                <ul>
                    <li><a href="#">teste1</a></li>
                    <li><a href="#">teste2</a></li>
                    <li><a href="#">teste3</a></li>
                </ul>
            </div>
            <textarea id="layer1"></textarea>
        <textarea id="layer2"></textarea>
        </div>
    </div>

with the css style right now looks like that:

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: realtive;
    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;
}

the two textareas should be resized simultaneously when layer2 (the one in the front) is resized (and layer1 maybe would not be a textarea in the final version of this).

also, if I resize the textareas horizontally, the navbar should stretch too, to keep track of the textarea new dimension.

Anyone knows how to make this happen? Does this requires some javascript code, or only css should suffice?

回答1:

Your end goal, as I understand it is:

Create a rich textbox editor.
- With two textarea elements
- With one tool-bar.
  - We will no longer assume this is actually a nav-bar.

The requirements in your post aren't 100% clear, but as I understand them:

When one textarea resizes, the other does to, along with the toolbar.

My only assumption, is based on a comment you made on another answer:

With this, the textareas are shown side by side, when I want one on top of the other...

I am going to assume that only adjusting the width of the textarea impacts the other not the height.

Below is a minimal pure CSS example that'll get you headed in the right direction. It's buggy (working with textarea always seems to be when it comes to sizing), but since this question is almost verbatim, my answer to your previous question, I'll let you work out the kinks in it. I highly recommend taking a look at the CSS calc function.

/* Rich Text Editor */
.rich-text-editor {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-width: 300px;
	background-color: #ccca;
	padding: 15px;
}
.rich-text-editor > .toolbar {
	list-style-type: none;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #f33;
	background: -webkit-linear-gradient(to right, #f33, #f77);
	background: linear-gradient(to right, #f33, #f77);
	padding: 5px 6px;
}
.rich-text-editor > .toolbar > li {
	display: inline-block;
	color: #fff;
	margin: 0 5px;
	padding: 5px;
	width: 15px;
	border: 1px solid #fff5;
	text-align: center;
	cursor: pointer;
	user-select: none;
	border-radius: 5px;
	transition: 0.3s linear all;
}
.rich-text-editor > .toolbar > li:hover {
	background-color: #fff5;
}
.rich-text-editor > textarea {
	width: 100%;
	border: 1px solid #ccc;
	border-top: none;
	padding: 5px;
}

/* Your Navbar */
.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%;
}

/* Just for Demonstration */
html, body {
	margin: 0;
	height: 100%;
}
.primary-content {
	height: calc(100% - 50px);
	display: flex;
	align-items: center;
	justify-content: center;
}

<div class="navbar site-nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Edit</a></li>
	</ul>
</div>
<div class="primary-content">
	<div id="rte-test" class="rich-text-editor">
		<ul class="toolbar">
			<li>H</li>
			<li>=</li>
			<li>/</li>
			<li>_</li>
		</ul>
		<textarea></textarea>
		<textarea></textarea>
	</div>
</div>

There is also the option of using JavaScript to manipulate the textareas respectfully, but it's a bit over the top and has the same issue that the pure CSS version does:

var richTextEditor = document.getElementById("rte-test");
var oldWidth = 0;
function resize(index, altIndex) {
	var textAreas = richTextEditor.getElementsByTagName("TEXTAREA");
	var width = textAreas[index].clientWidth;
	if (oldWidth !== width) {
		textAreas[altIndex].style.width = width + "px";
		oldWidth = width;
	}
}

.rich-text-editor {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

<div id="rte-test" class="rich-text-editor">
		<textarea onmouseup="resize(0, 1);"></textarea>
		<textarea onmouseup="resize(1, 0);"></textarea>
</div>

I wish you the best of luck in your future endeavors.

回答2:

All your textarea have position: absolute, so I think it did no work.

Try this with flex :

.primary-content {
  position: relative;
  z-index: 0;
  height: 480px;
  width: 640px;
}

.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: 100%;
  height: 100%;
  resize: both;
}

#layer1 {
  z-index: 1;
  height: 100%;
}

#layer2 {
  z-index: 2;
  height: 100%;
}
.flex{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.insideTextArea{
  width: "50%"
}

<div class="textarea-with-nav" id="outerWrap">
  <div class="navbar">
    <ul>
      <li><a href="#">teste1</a></li>
      <li><a href="#">teste2</a></li>
      <li><a href="#">teste3</a></li>
    </ul>
  </div>
  <div class="flex">
     <textarea id="layer1" class="insideTextArea"></textarea>
     <textarea id="layer2" class="insideTextArea"></textarea>
  </div>
</div>

I don't test, but something like this can do the job.

来源：https://stackoverflow.com/questions/58994464/resize-several-elements-simultaneously

标签

javascript

html

css

resize