Geschrieben von Christian Schnettelker

Schlagwörter: ,

Webdesign-Tipps 3: Größenanpassung bei Texteingabeboxen steuern

Seit geraumer Zeit sehen mehr oder weniger alle Browser* die Möglichkeit vor, dass der Benutzer die Größe einer Texteingabe-Box selbst bestimmen kann. Erkennbar ist dies an einer kleinen, schraffierten Ecke rechts unten im Textfeld, siehe das folgende Bild:

Resize-Feld in Textarea
Diese Fläche lässt sich mit der Maus „anfassen“ und die Breite sowie Höhe der Textbox durch Ziehen verändern. Eigentlich ist das eine schöne Sache, statt mühsam innerhalb oft winziger Textboxen seine Mitteilungen zu tippen bringt man damit die Box einfach auf die gewünschte Größe, um übersichtlich schreiben und korrigieren zu können.

Der Haken

Aber wie immer hat die Sache auch hier einen Haken, zumindest aus der Sicht des Webdesigners: der Benutzer kann durch diese Operation das Layout der Seiten sozusagen „aus der Fassung“ bringen. Insbesondere die Veränderung der Breite macht oft Probleme, ist das Layout doch für in der Regel auf eine horizontale Ausdehnung von maximal 960 Pixel („960 Grid“) ausgelegt. Überschreitet nun die Breite der veränderten Textbox den rechten Rand gibt das oft sehr unschöne und unprofessionell aussehende Effekte.

Um nicht als „Stümper“ dazustehen sollte jeder professionelle Webdesigner genau definieren, in wiefern eine Textbox verändert werden kann. Dies geschieht natürlich wie immer innerhalb der CSS-Datei, die Eigenschaft zur Steuerung heißt „resize“. Hier die möglichen Werte:

resize:none;        /* Keine Veränderung erlaubt */
resize:both;        /* Veränderung der Breite + Höhe möglich */
resize:horizontal;  /* Veränderung nur in der Breite */
resize:vertical;    /* Veränderung nur in der Höhe */

Bei meinen Projekten wähle ich meist die Eigenschaft „resize:vertical“, damit ist die Veränderung der Höhe der Textbox nach unten möglich (mehr Zeilen werden sichtbar), die Breite ist jedoch fixiert, damit das Layout nicht zerstört wird. Aber hier wieder mein bekannter Spruch: viele „Webdesigner“ haben von dieser Thematik noch gar nichts gehört oder es ist ihnen einfach egal – oder beides…

Noch ein Tipp: für Firefox sollten Sie bei einer flexiblen Textbox auch die Eigenschaften „min-height“ bzw. „min-width“ setzen, damit die Box nicht „zu klein“ werden kann.

Bitte benennen Sie sich zur Nutzung dieses Formulars um

Apropos Formulare, ganz „entzückt“ bin ich, wenn ich Texteingabefeldern begegne, die extrem begrenzt sind. Letztens bei einer Online-Bestellung war das Feld „Kundenname oder Firma“ auf sagenhafte 20 Zeichen beschränkt – dumm nur, dass mein Name 22 Zeichen lang ist. Manche Webdesigner gehen wohl davon aus, dass alle „Kai Rau“ oder „Tim Kro“ heißen.

Auch für das Feld „Straße“ dachte man, dass 20 Zeichen üppig bemessen sind. Eine beschreibende Eingabe wie „Kruppstr. 82 (ETEC gegenüber H5)“ mit 32 Zeichen ist schlicht nicht vorgesehen, egal, welche Probleme das später bei der Auslieferung des Paketes nach sich zieht.

Noch ärgerlicher wird es, wenn man an Firmen denkt, zum Beispiel eine GbR. Das Finanzamt schreibt in diesem Falle als Firmenbezeichnung die Nennung der Namen sämtlicher Gesellschafter vor, da ist eine Begrenzung auf 20 Zeichen nur noch als grotesk-realitätsfern zu bezeichnen, es sei denn, es handelt sich um die „Kai Rau & Tim Kro GbR“. Oft genug habe ich in einem solchen Fall entnervt aufgegeben und woanders bestellt, selber schuld…

_________________________________________________________
* Bei meinen Tests sehen Chrome, Firefox und Opera die Möglichkeit vor, Texteingabeboxen in der Größe verändern zu können.

Unrühmliche Ausnahme ist mal wieder der Internet-Explorer; der uns allen bekannte Hersteller dieses Browsers hat sich zwar viel Mühe gegeben, die Optik des IE10 auf das reduzierte, kantige, flache Design von Windows 8 anzupassen, für diese m.E. sinnvolle Erweiterung hatte man aber wohl keine Zeit.

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Kommentare

Kommentare

  1. Marc Meierhof schrieb:

    Oh man, ich glaube dann bin ich ein Stümper. :D
    Ich habe es immer mit max-width und min-width gelöst. Dementsprechend konnte man auch nur die Höhe verändern. Vielen Dank!

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.