Menu
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?
Thank you.
393
The idea is to create a div with the class name “wrapper”. Inside that <div> element, we create a text area with a certain number of columns and rows. In this case, it is 30 and 15 respectively. After that, we set the width property to 100% to make a textarea width 100%.
You need to define width of the div containing the textarea and when you declare textarea , you can then set . main > textarea to have width: inherit . Note: .
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
Inside that <div> element, we create a text area with a certain number of columns and rows. In this case, it is 30 and 15 respectively. After that, we set the width property to 100% to make a textarea width 100%. HTML Code: The HTML code contains a <textarea> element that holds rows and columns values. padding is present?
… result in it fitting nicely within any width of its parent. Can CSS actually do this? If not that would be pretty lame. It can be done with CSS3’s box-sizing property. You would set the value to border-box and then it will account for the borders and padding (everything from the outer points of the border inward).
Well, this is happening because you’ve set it to 100% of the width, when you want it to be less than that. Plus, the padding actually adds to the width. So you just need to make it less than 100%. I would use px, since that’s what you use.
Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least. Luckily there's a quick CSS solution to this problem! box-sizing to the rescue!
<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.
164
I advice 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
