CODEWITHSUNDEEP
htmlcssinputtextarea
lmenus
lmenus

Reputation: 613

Styling empty textarea height

I am trying to put textarea in my layout. However, when it's empty with only placeholder, there seems to be an extra row added. I wish to get rid of it as it breaks my layout. I cannot set fixed height as the textarea is fluid depending on the text input.

Here's the screenshot. enter image description here

Here are all rules as shown in Safari (I omitted those that are not active).

CSS:

min-height: 36px;
padding: 16px;
margin-right: 16px;
box-sizing: border-box;
font-size: 14px;
max-height: 100px;
overflow: hidden;
resize: none;
width: 80%
-webkit-appearance: textarea;
background-color: white;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: initial;
border-right-color: initial;
border-bottom-color: initial;
border-left-color: initial;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0em;
font-style: normal;
font-weight: 400;
font-family: -apple-system;
font-variant: normal;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-writing-mode: horizontal-tb !important;
list-style: none;

Thanks for any help!

EDIT: Here's the same element without min-height and padding applied. enter image description here

Upvotes: 0

Views: 2673

Answers (2)

JesseCloutier
JesseCloutier

Reputation: 36

Most browsers set the default rows of a textarea to 2 rows as you can see here: https://www.w3.org/wiki/HTML/Elements/textarea.

There is no css property to modify the number of rows in a textarea.

What you could do if you really need 1 row is set rows='1' and then use javascript to dynamically add more rows as the user types. You can find an example of that here: add new row to textarea input while editing

Upvotes: 1

AmitJS94
AmitJS94

Reputation: 1212

The height of a row in textarea is set by line-height.

For example:

<textarea rows="1">Text text</textarea>

If you set the following:

textarea { font-size: 16px; border: none; margin: 0; padding: 0; line-height: 1; }

By inspecting the textarea element you'll find out that it has a height of 16px.

Upvotes: 1

Related Questions