Formulare ausrichten mit jQuery und CSS
Formulare lassen sich gut mit Tabellen oder Label layouten. Allerdings sind Tabellen zum Anzeigen von Daten gedacht und nicht um Oberflächelemente zu positionieren. Bei der CSS Variante mit Div’s und Label steht man vor dem Problem, dass sich die Länge des Formularfeld beschreibenden Textes ändern kann und ab einer bestimmten Breite zu einem Zeilenumbruch oder zu einer unterschiedlichen Ausrichtung der Formularfelder führen.
Diese kleine Schwierigkeit lässt sich mit jQuery elegant umgehen.
Zunächste einmal brauchen wir ein einfaches HTML-Grundgerüst:
1 2 3 4 5 6 7 8 | <div class="input_div"> <label for="name">Name:</label> <input type="text" id="einName" name="derName" /> </div> <div class="input_div"> ... ... </div> |
Das CSS ungefähr in dieser Form:
1 2 3 4 5 6 7 8 9 10 11 12 13 | label, input[type="text"]{ float: left; display: block; } label{ margin-right: 5px; } .input_div{ width:100%; overflow:auto; } |
Im Normalfall gibt man dem Label noch eine fixe “width” Eigenschaft mit. Aber damit die Texte in jedem Fall in das Label passen und immer den gleichen Abstand zum Formularfeld haben, benutzen wir jQuery um die notwendige Breite bestimmen zu lassen:
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function() { var max = 0; //prüfe die Breite jedes Labels und speichere die größte Zahl in der Variable max $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); }); //setze jedes Label-Tag auf die gleiche Breite $("label").width(max); }); |
So, das wäre es dann schon gewesen und das Ergebnis sieht wie folgt aus:
Webagentur on Juni 4th, 2009
Kann man mit dieser Möglichkeit nicht eigentlich auch sagen, dass alle divs die selbe Höhe haben sollen? Müsste doch gehen.
Stefan Huissel on Juni 7th, 2009
Das müsste tatsächlich gehen. In jQuery steht auch die Methode height zur Verfügung die die Höhe eines Elementes zurückgibt. Allerdings stellt sich bei formularfeldbeschreibenden Labels die Frage ob ich die height überhaupt am größten Element ausrichte. Die meisten Texte werden bei begrenzer Breite eben nach unten fortgeführt bis irgendwann der Scroll zum Einsatz kommt. Naja, es wird sicherlich einen sinnvollen Einsatzzweck dafür geben
. Ich werde das mit der height bei nächster Gelegenheit auch noch testen und bescheid geben.
Ich nettes, etwas älteres, Plugin über min-height und max-height und width für verschieden Browser möchte ich noch zu diesem Thema empfehlen. Ihr findet es auf jQMinMax. Es ersetzt die Funktionalität der min-height in allen Browsern, die diese Eigenschaft eigentlich nicht unterstützten.