How to set height for autosize textarea in Element UI

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

Default style

查检the elements in the browser and find

The height is controlled by height and min-height of textarea text in the box. 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 in全局样式:

 $inputHeight: 38px;$inputFontSize: 16px;.el-textarea { textarea { padding: 8px; // Set padding height: $inputHeight; // Set height font-size: $inputFontSize; line-height: 21px; }}

After revising it, I found that:

• 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

Set height to !important , the height has changed, but it cannot automatically expand

-> Give up

Write textarea component yourself, so that the style can be changed at will, but to implement文本框随内容扩展, you have to write a bunch of js, which is a bit expensive

-> Not preferred use

During the debugging process, it was found that the initial height of autosize textarea in Element UI will change with padding value.

So, I adjusted the size of padding in the browser until the height it supports is consistent with 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 change the padding here to affect the height of the textarea font-size: $inputFontSize; line-height: 21px; }}

This is the end of this article about how to set the height for the autosize textarea in the Element UI. For more related Element UI autosize textarea content, please search for previous articles from Wulin.com or continue to browse the relevant articles below. I hope everyone will support Wulin.com in the future!