When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing width of labels. Tables stretch its cells according to width of largest element in a column. That way you can have aligned form. Fixing label width will also also allow you to have a hard-coded but aligned form.

But…

But what if you don’t want to use tables? Or what if you don’t know how long labels could be because you are developing an application that has many localized strings? And you still want to align input elements according to the width of the longest label?

If you create a simple web form like in the example below all you have to do is to set float:left and display:block for both label and input field.

These are the CSS styles:

label, input[type="text"]{
    float:left;
    display:block;
}
label
{
    margin-right: 5px;
}
.field{
    width:100%;
    overflow:auto;
    margin:5px 0px;
}

Looks familiar? Usually, you would set the width of labels to some number, let’s say 100px. But, let’s do another thing. Let’s calculate the width of a largest label and apply it to all labels. jQuery function below does exactly what I wrote:

$(document).ready(function() {
    var max = 0;
    $("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();
    });
    $("label").width(max);
});

And visually it looks like this:

with justify
Conclusion

It’s easy to do many tricks using jQuery and this was just one of them. Maybe there are simplest solutions to do this, but it was fun to see putting jQuery in most common scenarios like this one.
Source: http://www.jankoatwarpspeed.com/post/2008/07/09/Justify-elements-using-jQuery-and-CSS.aspx

Demo: http://www.jankoatwarpspeed.com/post/2008/07/09/Justify-elements-using-jQuery-and-CSS.aspx

Related Listings:

1. In-Field Labels jQuery Plugin This is a simple plugin that turns properly formatted HTML...
2. jVal – jQuery Form Field Validation Plugin jVal is a jQuery form field validation plugin that provides...
3. jQuery Inline Field Labels It’s so simple, but perfect. A great benefit of using...
4. jQuery Field Plugin This plugin greatly expands the ability to retrieve and set...
5. Custom HTML Form Elements Have you ever wanted to use your own images for...

Do you like this post?

Email: