Menu icon Foundation
Resizing textarea height

Hi all,

I am trying to resize a textarea. I've tried adjusting the height with rows="1" and resizing it in the CCS. However, the textarea will not shrink. I can increase the height, but I cannot shrink it. I want it to be roughly the same size an input field.

Any idea on how to shrink the textarea size? Right now it will not go any lower than 2 rows. I've tried setting the height:auto as I've seen some posts that suggest it is a bug but that did not work either.

I can set the rows equal to something greater than 2 and it will grow which seems odd.

Thanks!

<div class="row">
    <div class="small-9 columns">
		<div class="messageInputFormContainer">
			<textarea rows="1" placeholder="Message"></textarea>
		</div>
	</div>
</div>


.messageInputFormContainer > input{
    border-radius: 5px 5px 5px 5px;
	resize: none;
}

Capture

textareacssRowsresize

Hi all,

I am trying to resize a textarea. I've tried adjusting the height with rows="1" and resizing it in the CCS. However, the textarea will not shrink. I can increase the height, but I cannot shrink it. I want it to be roughly the same size an input field.

Any idea on how to shrink the textarea size? Right now it will not go any lower than 2 rows. I've tried setting the height:auto as I've seen some posts that suggest it is a bug but that did not work either.

I can set the rows equal to something greater than 2 and it will grow which seems odd.

Thanks!

<div class="row">
    <div class="small-9 columns">
		<div class="messageInputFormContainer">
			<textarea rows="1" placeholder="Message"></textarea>
		</div>
	</div>
</div>


.messageInputFormContainer > input{
    border-radius: 5px 5px 5px 5px;
	resize: none;
}

Capture

This post has been closed. No new replies can be added.

Eric about 4 years ago

Literally two seconds after I posted I found the answer. There is some code that sets the minimum height of the text area equal to 50px. :-)