Google’s Webbrowser Chrome hat ein recht ungewöhnliches Feature:
Mehrzeilige Eingabefelder (textarea) in Formularen können in der Größe verändert werden, wobei sich die Seite dynamisch anpasst.
Ein Bespiel für Chrome:
Der Quellcode dazu:
<textarea>
Ein mehrzeiliges Eingabefeld (Größenänderung funktioniert nur im Chrome Browser).
</textarea>
Auch wenn das teilweise sehr nett ist möchte man das als Webdesigner nicht unbedingt, da es z.B. das Layout stören würde oder zu Überlappungen führen kann.
Den Effekt kann man vollständig mit CSS unterbinden, dafür braucht man nur „resize:none;“ für die CSS Formatierung verwenden. Das sieht dann so aus:
Auch hier der Quellcode:
<textarea style="resize:none">
Ein mehrzeiliges Eingabefeld (Größenänderung funktioniert auch nicht mit dem Chrome Browser).
</textarea>
Alternativ kann man das auch zentral z.B. für alle Textareas setzen.
Mitunter möchte man aber dem Benutzer noch etwas Veränderungsspielraum einräumen. Mit der Angabe von max-width und/oder max-height kann man die Größenänderung in horizontaler oder vertikaler Richtung verhindern.
Auch hierzu ein kleines Beispiel, zunächst mit max-width:
Der Quellcode dazu:
<textarea style="width:200px;max-width:200px;">
Ein mehrzeiliges Eingabefeld (Größenänderung funktioniert nur im Chrome Browser in vertikaler Richtung).
</textarea>
Nun ein Beispiel mit max-height:
Der Quellcode dazu:
<textarea style="height:100px;max-height:100px;">
Ein mehrzeiliges Eingabefeld (Größenänderung funktioniert nur im Chrome Browser in horizontaler Richtung).
</textarea>
Wenn man max-height und max-width gleichzeitig angibt hat das übrigens den gleichen Effekt wie resize:none.