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

Question

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?

Krevan · Accepted Answer · 2010-07-31 12:23:37Z

39

<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.}

answered Jul 31, 2010 at 12:23

Krevan

1,7011 gold badge14 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

+1 I never realized that you need those attributes in order to make width:100% work. I used some other work around to automatically resize the textarea if its parent container is resized but now it is so much easier :) Thank you!

Phil DD Over a year ago

@FelixKling I don't think cols and rows are required to make the width:100% work... cols and rows are required attributes of a textarea HTML element, which considered invalid without them, i.e. an HTML validator will complain. The width:100% working the way you expect, is a function of the browser. This did not work for older browsers.

Klesun · Accepted Answer · 2022-07-17 14:08:56Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related