Textfield-Resize des Browsers steuern

Axel Güldner Datum: 5. April 2012
Autor: Axel Güldner


Wer hat dieses Textfield-Resize eigentlich eingeführt? War es der Chrome der es das erste mal angeboten hat? War es der Safari? Egal, Apple oder Google, einer von beiden ist mit Sicherheit schuld.

Aber Moment, wovon rede ich da eigentlich? Dem einen oder anderen, vielleicht ja auch jedem, ist evtl. aufgefallen, dass sich Textfields in Formularen mittlerweile in so ziemlich jedem Browser fröhlich groß und klein ziehen lassen. Das ist an sich eine nette Sache, kann der User sich so immerhin ein zu kleines Textfeld passend größer zerren.

Der nicht so schöne Nebeneffekt, wir Designer haben uns was dabei gedacht wenn ein Textfield in einem Formular 500px breit ist und wir mögen es dann gar nicht wenn jeder Webseitennutzer an der Größe rumspielt und uns hinterher ganz clever darauf hinweist, dass die Seite nun auf einmal blöd ausschaut. Na ist doch klar dass die Seite hinterher blöd ausschaut, deswegen war das Textfeld ja ursprünglich nur 500px breit und nicht 1500px – selbst schuld und Feierabend.

Wer jetzt immer noch nicht weiß um was es geht, kann sich ansonsten mal die beiden Screenshoots von Stuttgart anschauen. Einmal wie das Textfeld ursprünglich gedacht war, einmal wie es sich fröhlich vergrößern lässt.

Und jetzt zu dem Teil weswegen Ihr diesen Beitrag lest:

Aber CSS3 gibt uns ein kleines Attribut zur Hand, mit welchem wir die verflixten Textfelder wieder zur Räson bringen können.
Gemeint ist das Attribut »resize« welches »none«, »vertical«, »horizontal« und »inherit« sein kann. Darüber kann man mit wenig Aufwand die Resize Funktion des Browsers auf eine Achse begrenzen oder auch ganz abschalten.

 

Kommentare

Michael

– 13. April 2012 / 09:33

Das Ganze funktioniert auch ohne CSS3, indem man ganz einfach Höhe und Breite beschränkt.
z.B.: max-height:100px; max-width:587px; min-height 100px; min-width:587px;

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Responsive Webdesign – Was hat das mit mir zu tun?

Autor: Axel Güldner


Projekte // Technologie // Über den Tellerrand // User Experience & Design


Das Thema Responsive Webdesign hat inzwischen jeden von uns, der mit offenen Augen durch das Internet läuft, mindestens einmal berührt. Quasi wie aus dem Nichts ist diese Disziplin über Nacht zum neuen Buzzword unter Webdesignern/Entwicklern und Marketingleuten geworden. Responsive Webdesign gilt einfach als sexy, auch wenn die eigentliche Idee dahinter nicht gerade neu ist. Jeder …


Beitrag lesen
18.
Januar
2012

Templating with good ol’ Javascript

Autor: Benjamin Hofmann


Technologie


Die letzten Tage bin ich auf eine interessante Technik gestoßen, mit der man ein sehr simples Templating in Vanilla JS umsetzen kann. Das Ganze orintiert sich an den Techniken, die z.B. Handlebars.js oder die originale Micro-Templating-Technik von John Resig nutzen, ist jedoch deutlich kleiner. Der Code Der komplette Code basiert auf RequireJS, kann aber natürlich …


Beitrag lesen
29.
Sep.
2016

Probleme mit Hochkommas in Produktliniennamen

Autor: Darian Dragut


Projekte // Technologie


Nach dem Basis-Setup der imx.Platform Instanz für Chiemgau wurde ich mit einem merkwürdigen Fehler konfrontiert. Sowohl in den Suchen für Stämme und Angebote als auch in deren Pflegemasken wurde der Produktlinienbaum nicht angezeigt. Noch merkwürdiger erschien mir der Fehler, nachdem ich feststellte, dass die Produktlinien in der Produktlinien-Administration hingegen problemlos angezeigt werden. Da keinerlei Fehler …


Beitrag lesen
02.
Dez.
2015

PhotoSwipe: Responsive JavaScript Image Gallery

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Ich bin gestern auf eine ziemlich geniale Lightbox-Lösung gestoßen: PhotoSwipe. Diese baut auf Vanilla JS auf und ist auf hohe Performance und die mobile Verwendung ausgelegt, bei der ja doch ziemlich viele Lightboxen scheitern oder von uns sogar deaktiviert werden. Und trotz all dieser Features sind das Skript und die dazugehörigen Styles sehr klein was …


Beitrag lesen
22.
Sep.
2016