Adjusting fixed-width containers on textarea resizing

Question

I am creating a two-column layout by having one div floating left (with a width of almost 50%) and another div floating right. Inside these divs I am displaying a textarea. This works fine in principle and nicely adjusts the width of the columns to the available width.

However, when someone uses the browser's textarea resizing function (e.g. in Firefox) to change the size of the textarea, the div does not adjust. The result of this is that the text area is resized, but extends outside the div (or just becomes cut off).

Can I fix this somehow?

MWE:

    <div style="overflow: hidden;">
     <div style="float: left; width: 40%; background: red; padding: 1em;">
      <textarea style="width: 100%">left</textarea>
     </div>
     <div style="float: right; width: 40%; background: green; padding: 1em;">
      <textarea style="width: 100%">right</textarea>
     </div>
    </div>

You could disable the `textarea` resize: http://stackoverflow.com/questions/5235142/how-to-disable-resizable-property-of-textarea — Paul Redmond, Sep 24 '15 at 10:57

Luís P. A. · Answer 1 · 2015-09-24T11:07:37.693

1

You can only permit the vertical resizing to avoid your problem.

CSS

textarea { resize:vertical; }

DEMO HERE

If you want to disble the resizing do this:

CSS

textarea { resize:none; }

If you want to have the resizing and expand the div you should use min-heightinstead width:

HTML

<div style="overflow: hidden;">
    <div style="float: left; min-width: 40%; background: red; padding: 1em;">
        <textarea style="width: 100%">left</textarea>
    </div>
    <div style="float: right; min-width: 40%; background: green; padding: 1em;">
        <textarea style="width: 100%">right</textarea>
    </div>
</div>

DEMO HERE

edited Sep 24 '15 at 11:07

answered Sep 24 '15 at 10:57

Luís P. A.

9,524
2
23
36

Thanks, but I do actually want to allow resizing. – Nils Sep 24 '15 at 11:00
It´s simple, you can set `min-width:40%` instead `width: 40%` - check it out - https://jsfiddle.net/bsq769v9/12/ – Luís P. A. Sep 24 '15 at 11:05

score 1 · Answer 2 · answered Sep 24 '15 at 10:58

1

You can disable the horizontal resizing of text area

textarea {
  resize: vertical; /* you can resize vertically, but not horizontal */
}

answered Sep 24 '15 at 10:58

Arun Kumar M

1,633
1
15
26

Thanks, but I do actually want to allow resizing. – Nils Sep 24 '15 at 11:00
set max-width: 100%; for textarea – Arun Kumar M Sep 24 '15 at 11:40

Adjusting fixed-width containers on textarea resizing

2 Answers2