How to set the height of autosize textarea in element UI

Time:2020-9-27

In the element UItextarea inputWhen set to autosize, the default height of the text box is33, which does not conform to the design

Default style

In the browsercheckElements, finding

heightBytextareaOfheightandmin-heightTo controlPosition of text in boxBypaddingControl attempts

Modify theheightandpaddingTo see if it works

stayGlobal styleAdd:

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

.el-textarea {
  textarea {
    Padding: 8px; // setting the padding of the text box
    Height: $inputheight; // set the height of the text box
    font-size: $inputFontSize;
    line-height: 21px;
  }
}

After correction, we found that:

  • Padding is the new size
  • Height is not the height I set

This is the interesting text boxheightIs controlled by in line styles

Faced with this problem, I made two attempts

!important

holdheightSet to!importantThe height has changed, but it can’t automatically expand

->Give up

MyTextarea

Write it yourselftextareaIn this way, the style can be changed at will, but it should be implementedText box expands with contentIf you have to write a bunch of JS, the cost is a little high

->No priority

Padding determines the height

During debugging, it was found that,Element UIInsideautosize textareaThe initial height of thepaddingValue change of

So, I adjust it in the browserpaddingUntil the height of its support andfigmaThe height required in the

And then put thepaddingChange to the corresponding value

$inputFontSize: 16px;

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

summary

This article on how to set the height of autosize textarea in element UI will be introduced here. For more information about the height of element UI autosize textarea, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!

Recommended Today

A bitcoin client written to play

A bitcoin client written to play, the code is not complex, easy to understand bitcoin.Project address:https://github.com/jiangleo/b… cause Reading books is a good way to learn bitcoin, but without the help of code, it is difficult to understand how bitcoin is implemented. Therefore, I want to read the code implementation. When reading bitcoin core using C […]