Claudia: textarea soll in der grösse wachsen

ich möchte unten im Browser ein Textarea Feld haben, das in der Grösse sich nach oben hin ausdehnen soll. Auch die untere Spalte soll dann wachsen.

ich habe es mit resize: vertical versucht, aber es geht nicht und ausserdem geht resize auch nit im IE 8,9,10.

WIe kann ich das lösen?

Claudia

<div class="container">
	<div class="oben">1</div>
	<div class="links">2</div>
	<div class="rechts">3</div>
	<div class="unten">
		<textarea class="groesse" name="text"></textarea>
	</div>
</div>

und der dazugehörige CSS Code

html, body {height:100%;} 

*{margin:0;}

.container{min-height: 100%;height:auto !important;position:relative;height:100%;background:#c0c0c0;width:100%;} 
.oben{position:absolute;top:0;width:100%;background:#ff0000;height:50px;}  
.links{background:#006600;width:20%;float:left;height:100%;}
.rechts{background:#440000;width:80%;margin-left:20%;height:100%;}

.unten{position:absolute;bottom:0;width:100%;background:#ff0000;}  

.groesse {resize: vertical;}

ich habe es unter https://jsfiddle.net/r03ad2vx/ gepostet.

  1. Hallo Claudia,

    ein "Resize nach oben" ist ein Problem. Firefox und Chrome haben genau einen Resize-Henkel, und der ist unten rechts und resized nur nach unten.

    Das Folgeproblem ist dann noch die Größenanpassung des kompletten Layout abhängig von der textarea-Größe - denn eine Vergrößerung lässt ja nicht nur die untere Spalte - äh - Zeile wachsen. Da müssen auch die Bereiche für links und rechts schrumpfen.

    Den IE kannst Du ohne Javascript gar nicht bedienen.

    Ich sehe keine Möglichkeit, das ohne Javascript zu lösen (dann wär's auch für den IE gelöst). Aber bevor ich da was vorschlage, gucken wir mal was die Frontend-Cracks noch zu sagen haben.

    Nebenbei - deine Positionierung mit position:absolute und float könntest Du mit flexbox eleganter lösen. Mein Vorschlag wäre dieser, der wäre dann auch etwas von der <div>eritis befreit ;-). Statt aside könnte da auch nav stehen, hängt davon ab wofür du den grünen Bereich haben willst.

    Update: Für dein Problem wäre vielleicht ein SPLIT-Bar besser geeignet. Diesen Codepen habe ich auf den ersten Bing gefunden, ohne ihn genauer betrachtet zu haben. Das ist ein vertical split, aber sowas geht auch horizontal. Du könntest die Höhe der Textarea dann einfach relativ zur Höhe des Footer definieren.

    In wie weit man den Splitter dann für Tastatur- und Touch-Bedienung ertüchtigt bekommt, muss man noch sehen.

    Rolf

    --
    Dosen sind silbern
    1. @@Rolf B

      Diesen Codepen habe ich auf den ersten Bing gefunden, ohne ihn genauer betrachtet zu haben.

      Bei Betrachtung fällt auf: Er ist verbesserungswürdig:

      1. Es gibt ein HTML-Element für Trenner, das man anstelle von div verwenden kann: hr. (margin: 0; border: none setzen.)

      2. Da sich das Ding in beide Richtungen schieben lässt, ist cursor: w-resize falsch. Richtig: ew-resize.

      Sieht dann so aus.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory