How to set the height of the autosize textarea in Element UI

After setting textarea input in Element UI to autosize, the default height of the text box is 33 , which does not meet the design

Default Style

查檢the element in the browser, I found

The height is controlled by height and min-height of textarea . The position of the text in the box is controlled by padding .

Directly modify height and padding of the text box to see if it works

Add to全局樣式:

$inputHeight: 38px;
$inputFontSize: 16px;

.el-textarea {
  textarea {
    padding: 8px; // Set the padding of the text box
    height: $inputHeight; // Set the height of the text box
    font-size: $inputFontSize;
    line-height: 21px;
  }
}

After the modification, I found:

• The padding is already the new size.
• height is not the height I set

Interestingly, height of this text box is controlled by the inline style

Faced with this problem, I made two attempts

!important

Setting height to !important will change the height, but it will not expand automatically.

-> Give up

MyTextarea

Write your own textarea component, so that the style can be changed at will, but if you want to make文本框隨內容擴展you have to write a lot of js, which is a bit costly.

-> Not preferred

Padding determines the height

During debugging, I found that the initial height of autosize textarea in Element UI changes with the value of padding .

So, I adjusted the size of padding in the browser until the height it supported matched the height required in figma

Then change padding in the global style to the corresponding value

$inputFontSize: 16px;

.el-textarea {
  textarea {
    padding: 7.5px 0 7.5px 8px; // Just changing the padding here will affect the height of the textarea font-size: $inputFontSize;
    line-height: 21px;
  }
}

Summarize

This is the end of this article on how to set the height for the autosize textarea in Element UI. For more information about Element UI autosize textarea height, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!