CODEWITHSUNDEEP
javascripthtmlcssxhtml
johnjohn
johnjohn

Reputation: 4281

How to make textarea fill the width of its parent width?

Given that we don't know the div's width beforehand?

My idea: Calculate the div 's width with JS, find a way to convert it to cols and the apply the css to the textarea onthe fly. But perhaps there 's no need to reinvent the wheel?

Upvotes: 21

Views: 19835

Answers (2)

Klesun
Klesun

Reputation: 13673

I advise flex over width: 100%, as 100% often does not account for borders, causing horizontal scrolls to appear.

<div style="display: flex">
    <textarea style="flex: 1"></textarea>
</div>

Upvotes: 5

Krevan
Krevan

Reputation: 1681

<textarea style="width:100%">* will work in most cases.

If it doesn't, please provide more information!

* Note: for some reason, it will need the cols and rows attributes to validate. But setting a width or a height will override them, so put any value you want.

Upvotes: 38

Related Questions