Textfield-Resize des Browsers steuern

Datum: 5. April 2012
Autor*in: 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

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Der „Checkbox-Hack“ oder wie mache ich eine Weiterlesen-Funktion

Autor*in: Florian Müller


Technologie


Da ich immer wieder von Unsicherheiten für eine Weiterlesen-Funktion lese, wollte ich euch eine schöne und schnell zu implementierende Möglichkeit zeigen, wie man diese auch Implementieren kann. Diese wurde mir von Benni vor ein paar Wochen vorgestellt und ist auch schon bei ein paar Projekten im Einsatz. Die HTML Struktur ist relativ einfach und kann …


Beitrag lesen
01
AUG
16

JIT Grunt

Autor*in: Florian Müller


Technologie


Dieser Beitrag nimmt Bezug auf meinen vorherigen Beitrag zur Optimierung von Grunt. Wer diesen nicht kennt, wird mit diesem hier nicht viel anfangen können. Wer den Concurrent Task und dazu auch den Time-Grunt einsetzt, mag schon mal bemerkt haben, dass bei jedem Concurrent Task sämtliche Tasks geladen. Auf dem DEV dauert dies auch mal gerne 2 …


Beitrag lesen
08
FEB
17

Browser Diet

Autor*in: Benjamin Hofmann


Technologie


Eben bin ich über t3n auf eine interessante Website gestoßen: Browser Diet. Hier geht es darum, wie der Name bereits vermuten lässt, wie man Websites im Browser beschleunigen kann. Einiges davon machen wir bereits seit einiger Zeit, einiges nicht. Ein paar Beispiele dafür sind folgende Punkte: http://browserdiet.com/#cache-array-lengths Ein viel gemachter Fehler, auch in PHP, da …


Beitrag lesen
27
MRZ
13

WJAX 2018 – Angular, Java 11 und ein wenig ML

Autor*in: Magdalena Piller


Technologie


Im November war ich mal wieder auf der WJAX und habe mir den „Angular-Day“ herausgesucht, also ein kompletter Tag rund um Angular. Aber auch ein paar andere Themen versprachen Interessantes. In der Keynote mit dem Titel „Trust and Confidence through Chaos“ präsentierte Russ Miles seine Variante des Chaos Engineerings ganz nach dem Motto „Umarme Deinen …


Beitrag lesen
28
DEZ
18