I have some boxes which contain textarea .
I would like textarea to overflow/resize vertically
and not horizontally .
I want the textarea/box expand vertically as it overflows .
with no-scrollbar ,
so that user doesnt have to manually scroll .
https://codepen.io/Millie-the-decoder/pen/RwEzvrO
Thanks for your Help…
Do you mean something like this css tricks example ?
Hmm…
Wow , That’s intense .
I tried this , it works ,but I don’t understand why .
Looks like the code forces a ‘textarea’ ,
even though I deliberately commented it out .
||<!DOCTYPE html>|
| --- | --- |
||<html>|
||<head>|
||<title>Compare Left & Right Boxes</title>|
||<style>|
||.container {|
||display: flex; /* Use flexbox to create a row layout */|
||}|
|||
||.box {|
||flex: 1;|
||min-width: 200px;|
||border: 1px solid black;|
||padding: 10px;|
||overflow-x: auto; /* Add this line to enable horizontal scrolling */|
||overflow-y:auto;|
||resize: vertical;|
||}|
||/*|
||textarea {|
||width: 100%; /* Set the width of the textarea to 100% */|
||box-sizing: border-box; /* Include padding and border in the width calculation */|
||}|
||*/|
||</style>|
||</head>|
||<body>|
||<h4 style="text-align:center">Compare Left & Right Boxes</h4>|
||<h5 style="text-align:center">Stretch to Fit Container</h5>|
||<div class="container">|
||<div class="box" contenteditable="true">|
||<!-- Content of the first div -->|
||<!-- <textarea class="copyFrom" rows="4" cols="12">1</textarea> -->|
||</div>|
||<div class="box" contenteditable="true">|
||<!-- Content of the second div -->|
||<!-- <textarea class="copyFrom" rows="4" cols="12">2</textarea> -->|
||</div>|
||</div>|
||<div class="container">|
||<div class="box" contenteditable="true">|
||<!-- Content of the first div -->|
||<!-- <textarea class="copyFrom" rows="4" cols="12">3</textarea> -->|
||</div>|
||<div class="box" contenteditable="true">|
||<!-- Content of the second div -->|
||<!-- <textarea class="copyFrom" rows="4" cols="12">4</textarea> -->|
||</div>|
||</div>|
||<div class="container">|
||<div class="box" contenteditable="true">|
||<!-- Content of the first div -->|
||<!-- <textarea class="copyFrom" rows="4" cols="12">5</textarea> -->|
||</div>|
||<div class="box" contenteditable="true">|
||<!-- Content of the second div -->|
||<!-- <textarea class="copyFrom" rows="4" cols="12">6</textarea> -->|
||</div>|
||</div>|
||<div class="container">|
||<div class="box" contenteditable="true">|
||<!-- Content of the first div -->|
||<!-- <textarea class="copyFrom" rows="4" cols="12">7</textarea> -->|
||</div>|
||<div class="box" contenteditable="true">|
||<!-- Content of the second div -->|
||<!-- <textarea class="copyFrom" rows="4" cols="12">8</textarea> -->|
||</div>|
||</div>|
||<br>|
||</body>|
||</html>|Can you explain why it works ?
https://codepen.io/Millie-the-decoder/pen/yLGmbOV
Thanks for your Help…
No that code has nothing to do with a textarea. It’s just a simple div that has the attribute contenteditable="true" applied to it and allows you to type in the div.
The textarea code that you commented out is superfluous and can be removed.
You can read about contenteditable here.
It’s not a substitute for a textarea and you can’t submit the data unless you write a script to do so.
If you are not submitting data then it may be what you want but I can’t think of a ‘use case’ for it if you are not expecting to receive the typed in data somewhere?
Here’s a similar one based on another CSS tricks example.
It’s pretty straightforward once you realise how it works.
Hmm…
I thought is was a ‘textarea’ because (it looks like a textarea)
in the lower right corner it has a handle with which I can drag it to increase/decrease height .
It also has the textarea ability to (quacks like a duck)
if I ‘save page as’ , that ‘saved page’ preserves what’s in Div .
Another thing I like about this code
(as opposed to my original ) is that the drag handle doesn’t drag horizontally .
doesn’t drag
Love it .
Plenty interesting Eh ? .
Thanks
Yes that’s just a css property that does that.
resize: vertical;
No, it’s just a div that lets you edit content. It won’t submit in a form. 
If thats what you want to do then that’s fine but it bears no relation to a textarea and again I can’t think of a single ‘use case’ but if it suits your purpose then go for it
“If thats what you want to do then that’s fine but it bears no relation to a textarea and again I can’t think of a single ‘use case’ but if it suits your purpose then go for it ”
OOPS , ugh , my mistake , so far only a real ‘textarea’ saves content .
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.