css, js (vue) for textarea adaptive height (super detailed description)

Article directory

  • Requirements – as shown below
  • 1. Adaptive height of pure css (problems, not recommended)
    • 1. css code
    • 2. html code
    • 3. Code screenshot description
    • 4. Effects and possible problems
  • 2. Adaptive height of js
    • 0. Idea
    • 1. Code
      • 1. css code
      • 2. html code
      • 3. js code
    • 2. Code description
    • 3. Pay attention to the problems caused by points
      • (0) Problems found
      • (1) Find the problem
      • (2) Find the problem
      • (3) Solve the problem
      • (4) Other problem solving
    • 4. Scroll bar optimization style (can be ignored)
  • 3. Adaptive height of vue
  • Summarize
  • Supplement–resize: vertical;

Requirements – as shown below

Black part – the page layout is up, left, right, down
The red part – there is a text field on the right, adaptive height, the minimum height is 128px, the maximum height cannot exceed half of the right screen, and there is a confirmation button 16px from the bottom right

1. Pure css adaptive height (problems, not recommended)

1.css code

<style type="text/css">
  body, html{<!-- -->
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .right {<!-- -->
    max-height: 50%;
    width: 50%;
    height: 100%;
    background-color: pink;
  }
  .box {<!-- -->
      
      display: grid;
      word-break: break-all;
  }
  .box::after {<!-- -->
      content: attr(data-replicated-value) " ";
      white-space: pre-wrap;
      visibility: hidden;
  }
  .box>textarea {<!-- -->
      resize: none;
      overflow-x: hidden;
      overflow-y: auto;
  }
  .box>textarea,
  .box::after {<!-- -->
      border: 1px solid black;
      padding: 10px;
      grid-area: 1 / 1 / 2 / 2;
  }
</style>

2. html code

<div class="right">
  <div class="box">
    <textarea name="text" id="cssTextarea" class="cssTextarea" onInput="this. parentNode. dataset. replicatedValue = this. value"></textarea>
  </div>
</div>

3. Code screenshot instructions

4. Effects and problems

The effect is as shown below
Issue 1: It will lead to extra white space
Question 2: Scrollbars will not appear even if the height exceeds the limit (extended from question 1)

CSS pure style realizes self-adaptive summary: Yes, even if the button is not added, it can’t be changed, so this kind of direct pass, after breaking the idea of css pure style to realize the self-adaptive height of textarea, let’s take a look The way to use js.

2. js adaptive height

0. Idea

1: First, set the parent box to display: flex, and set flex-direction: column to arrange the child elements vertically.
2: Then, set the maximum height of the parent box to max-height: 50%, that is, the maximum height is half of the height of the parent box.
3: After that, set the minimum height for the text field, and hide the horizontal axis scrolling, and the text field exceeds the vertical axis scrolling.
4: Second, use flex-grow: 1 to set the text field to be scalable and make it take up the remaining space.
5: Next, set resize: vertical to allow the user to dynamically adjust the height change in the vertical direction according to the number of characters entered when text is entered.
6: Finally, dynamically monitor the input content so that the height is equal to scrollHiehgt.
Optimization: Set the optimization style of the scroll bar, which can be ignored if not needed

1. Code

1. css code

 body, html{<!-- -->
  height: 100%;
  margin: 0;
  padding: 0;
}
.right {<!-- -->
  width: 50%;
  height: 100%;
  background-color: pink;
}
.textarea_box {<!-- -->
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 16px;
  width: 100%;
  max-height: 50%;
  border-radius: 8px;
  border: 2px solid red;
  box-sizing: border-box;
}
.textareaText{<!-- -->
  margin-bottom: 56px;
  padding: 0 24px 0 24px;
  width: 100%;
  min-height: 78px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  color: #333;
  flex-grow: 1; /* make the text field occupy the remaining space */
  resize: vertical; /* Allow the user to adjust the vertical direction change */
}
.btn{<!-- -->
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 0 16px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  background: #1979ff;
  color: #ffffffe6;
  font-size: 16px;
  cursor: pointer;
}

2. html code

<div class="right">
  <divclass="textarea_box">
    <textarea name="text" id="textareaId" class="textareaText"></textarea>
    <div class="btn">Confirm</div>
  </div>
</div>

3. js code

<script>
 document.getElementById('textareaId').addEventListener("input", function() {<!-- -->
      this.style.height = "inherit";
      this.style.height = `${<!-- -->this.scrollHeight}px`;
    });
</script>

2. Code Description

.

3. Problems caused by attention points

(0) Problem found

1: The padding in the text field will be calculated into the height of the text field, so try to set the parent box of the text field to achieve the effect
2: If you don’t consider the button, etc., but just need a self-adaptive box, just follow the six steps in the above picture, and achieve the effect according to the design draft.

(1) Found a problem

If you check the effect according to the above code, you will find that there is a scroll bar even if it does not reach 50% of the parent box

(2) Find the problem

As shown in the figure below, the height of the parent box is 181px, the height of the text field is 105, minus 56 of the bottom button, the padding-top of the head of the parent box: 16px
181-105-56-16 = 4 , the height difference is 4px, so a scroll bar appears

(3) Solve the problem

Combined with the above content, as shown in the figure below, it is caused by the distance of the border, and the solution is also very simple, just delete this line

(4) Other problem solving

Thinking: If it is not caused by the border, but by the extra padding or margin, is there any other solution?
Solution: Add a small distance to the scroll height

4. Scroll bar optimization style (can be ignored)

Note: the variable in front of the scroll bar needs to be consistent with the class name or id name of the text field

.textareaText{<!-- -->
  margin-bottom: 56px;
  padding: 0 24px 0 24px;
  width: 100%;
  min-height: 78px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  color: #333;
  flex-grow: 1; /* make the text field occupy the remaining space */
  resize: vertical; /* Allow the user to adjust the vertical direction change */
}
/* Optimized style of the scroll bar, can be ignored */
/*Scroll bar overall style*/
.textareaText::-webkit-scrollbar {<!-- -->
  width:4px;
  height: 4px;
}
.textareaText::-webkit-scrollbar-thumb{<!-- -->
  border-radius: 5px;
  box-shadow: inset005pxrgba(0,0,0,0.2);
  -webkit-box-shadow: inset005pxrgba(0,0,0,0,0.2);
  background: rgba(0,0,0,0,0.2);
}
.textareaText::-webkit-scrollbar-track{<!-- -->
  box-shadow: inset005pxrgba(0,0,0,0,0.1);
  -webkit-box-shadow: inset005pxrgba(0,0,0,0,0.1);
  border-radius: 0;
  background: rgba(0,0,0,0,0.1);
}

For a detailed tutorial on optimizing the scroll bar, you can read the article I wrote before How to set the style of the scroll bar and scroll bar floating display and hide

3. Adaptive height of vue

Just change it according to js, just change the listening input event to the value input in the watch text field, the idea is the same.

Summary

1: No pure css can perfectly complete the adaptive height of the text field
2: html + css + js completes the adaptive height idea of the text field

  1. First, set the parent box to display: flex, and set flex-direction: column to arrange the child elements vertically.
  2. Then, set the maximum height of the parent box to max-height: 50%, that is, the maximum height is half of the height of the parent box.
  3. After that, set a minimum height for the text field and hide horizontal scrolling so that the text field exceeds the vertical scrolling.
  4. Second, use flex-grow: 1 to make the text field expandable and make it take up the remaining space.
  5. Next, set resize: vertical to allow the user to dynamically adjust the height change in the vertical direction according to the number of characters entered when text is entered.
  6. Finally, dynamically monitor the input content so that the height is equal to scrollHiehgt.
    Optimization: Set the optimization style of the scroll bar, which can be ignored if not needed

Supplement–resize: vertical;

(1) Value: resize: none | horizontal | vertical | both | initial | inherit;
(2) Function:
A value of none for this attribute disallows resizing of the element.
horizontal: This value allows the user to resize the width of the element. It will resize the element horizontally. There is a one-way horizontal mechanism for controlling the width of elements.
vertical:: It allows the user to resize the height of the element. It will resize the element vertically. There is a one-way vertical mechanism for controlling the height of elements.
both:: It allows the user to adjust the width and height of the element.
initial:. Set properties to default values.
inherit: It inherits attributes from its parent element.
(3) The difference between using and not using resize: vertical in the text field
As shown in the figure below: If it is not used, the width and height of the horizontal axis and the vertical axis can be modified at the same time. If it is used, the user can only modify the height
If not used