CSS3 - Textarea zum anfassen schafft Probleme

Mit CSS3 kommt so manche schicke Neuerung ins Webdesign. Unter anderenm auch die neue resize Eigenschaft für z.B. Textareas. Damit ist es möglich dem User zu erlauben, Textareas durch ziehen mit der Maus in der Größe zu ändern. Dazu befindet sich dann in der unteren rechten Ecke an der Textarea ein Anfasser, ähnlich wie bei Fenstern auf der Arbeitsfläche.

So weit, so schön. Das ganze wird inzwischen auch von allen Browsern unterstützt, außer vom IE bis einschließlich IE9. Mit der Unterstützung fangen aber auch die Probleme an. Per Voreinstellung ist die resize Eigenschaft bei allen Browsern auf “both” eingestellt. Man kann also eine Textarea nach den Grundeinstellungen in beide Richtungen vergrößern.

Wer mit modernen Browsern durch Blogs und Foren streift, dem wird der Anfasser an den Textareas vielleicht schon aufgefallen sein. Blöd ist aber eben, dass man damit auch die textareas beliebig vergrößern kann. Das kann mitunter das Layout der Seite zerstören, oder wie bei WordPress dazu führen, dass man die Textarea ins Nirwana ausdehnt. Will sagen, man kann den Anfasser unter der Sidebar herziehen bis in den Bereich rechts neben der eigentlichen Webseite. Und dann findet man ihn nicht wieder! Die Textarea verschwindet auch unter der Sidebar und man kann in dem Bereich nicht mehr sehen was man schreibt.

Abhilfe schafft nur das setzen der CSS Eigenschaft resize für die betroffenen Textareas. Man muss die Eigenschaft dann aber nicht abschalten! Mit textarea{resize:vertical;} erreicht man z.B. dass die Textarea nur in der Höhe änderbar ist. Das zerschießt kein Layout und macht auch noch Sinn, wenn der User besseren Überblick über seinen Kommentar will. Ebenso gilt das natürlich für alle Foren und selbstgestrickten Seiten. Immer an ein {resize:vertical;} denken, dann klappts auch mit der Textarea.

(ix)

Kurzlink: http://goo.gl/JFI0f
Dieser Eintrag wurde veröffentlicht in ixPerts und verschlagwortet mit , , , , , , von Ixiter. Permanenter Link zum Eintrag.

Über Ixiter

Ixiter ist Quelltextschreiber, Pixelsortierer, Lieferantenbetreuer und Aufstrichberater. Wenn ihm das alles nicht reicht, schreibt er hier über nichts geringeres, als den Sinn und Unsinn der Existenz. Und wenn ihm die Argumente ausgehen, kommt er mit triftigen Gründen. Immer.

2 Gedanken zu “CSS3 - Textarea zum anfassen schafft Probleme

  1. Wie so oft sind’s grad die kleinen Dinge, die das (Webmaster-)Leben leichter machen. Guter Tipp, hab’ ich gleich mal in die CSS meines Bogs eingebaut.

  2. Gerne Olaf.
    Ich bin gespannt, wieviele Updates es dauert, bis das in den diversen Softwares berücksichtigt wird. :)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>