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

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Recap Velocity Conference Amsterdam 2016

Autor: Robert Klauser


Technologie // Über den Tellerrand


Nach drei spannenden Tagen von 7. bis 9. November 2016 in Amsterdam bin ich mit vielen neuen und interessanten Eindrücken von der Konferenz zurückgekehrt, die ich gerne mit Euch teilen möchte. Bei der Velocity Conference ging es um die Themen Web Performance in allen Facetten sowie DevOps als Prozess für den agilen und performanten Betrieb …


Beitrag lesen
11.
Nov.
2016

Open Graph Tags in der imx.Library

Autor: Bastian Schwarz


Technologie


Soeben habe ich eine neue Version des MetainfoGenerators bereitgestellt, der einen Builder und einen Renderer für die Open Graph Tags beinhaltet. Die Logiken zur Einbindung sind nicht im „Mock“-Smartyplugin enthalten, da die Logik sich von Portal zu Portal unterscheiden kann. Wicht dafür ist, dass die Open Graph Tags mind. aus title, image, url und type …


Beitrag lesen
04.
Sep.
2012

kraken.io: Einfaches Web Interface zur Bild-Optimierung

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Auch wenn wir inzwischen vermehrt skalierbare Iconfonts oder SVG-Grafiken einsetzen, so kommt es doch immer wieder vor, dass wir auch Rastergrafiken in den Formaten JPEG, GIF oder PNG im Layout einsetzen. Was wir aber allzu oft übersehen ist, dass man bei diesen einiges an Dateigröße sparen kann. Und das kommt inzwischen nicht nur denen zugute, …


Beitrag lesen
28.
Nov.
2014

Spamschutz-Alternative: MotionCAPTCHA

Autor: Stefan Oswald


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


Sehr interessanter Ansatz: > MotionCAPTCHA > Beispielseite Die Idee dahinter ist, dass der Benutzer eine vorgegebene Form (z.B. einen Kreis, einen Stern oder ein Häkchen) nach malen muss. Bots dürften daran zuverlässig scheitern. Der Autor betrachtet die derzeitige Version 0.2 als „Proof of Concept“ und noch nicht aus produktiv einsetzbare Lösung. Wir sollten das im …


Beitrag lesen
20.
Mai
2014