CODEWITHSUNDEEP
htmlcssresizetextarea
IPSDSILVA
IPSDSILVA

Reputation: 1829

How to disable manual resize of a <textarea> element, but still allow for automatic resizing for text overflow?

I'm sure there's an answer to this question somewhere on SO, but after some time of looking, I was unable to find one.

What I'm trying to do is create a <textarea> element that the user CANNOT manually resize (there won't be a dragable resize item in the bottom-right corner for the user to resize with), but still the <textarea> element will automatically resize when the text flows to a new line.

What I've tried is using resize: none, and while that eliminates manual resizing, it also removes automatic resizing when the content of the textarea goes too far within the space provided.

To be clear, I do not want there to be a scroll bar when the text overflows the size of the <textarea>. I would like for the element to get larger to accommodate the additional text.

Here's an example of what I've tried:

textarea {
  resize: none;
}
<textarea></textarea>

As you can see, it removes manual resizing, but also removes automatic resizing.

Upvotes: 0

Views: 1427

Answers (2)

Ajay Malhotra
Ajay Malhotra

Reputation: 838

There is an alternate of textarea using contentEditable property in HTML. You can use "DIV" instead of "Textarea" along with "contentEditable" property and your textarea is ready. We can not resize it but it will resize according to the lenght of content

Please check the below code snippet:

.alternate-texarea{width:300px; min-height:40px; border:1px solid #000; border-radius:6px;padding:5px;}
<strong id="alternate-textarea-label">Edit Me</strong>
<div contentEditable aria-labelledby="alternate-textarea-label" role="textbox" aria-multiline="true" aria-placeholder="Street, City, Postal Code" class="alternate-texarea">
  Edit the text
</div>

Upvotes: 2

Yudono Putro Utomo
Yudono Putro Utomo

Reputation: 162

you can use contenteditable="true", it can auto resize when typing but can't be resized manually

<span contenteditable="true">tester</span>

Upvotes: 2

Related Questions