labelWidth plugin for jQuery

This plugin normalizes the width of the labels in a form to be the same, so, you can layout the form easily without using tables. The resultant width will be the greatest of all labels.

The plugin code is really, really simple, but it comes from the needs of a great designer friend of mine, e-lena.

Usage

The plugin will find all the labels below the matched elements and will modify the width of them. By default it searches for <label /> tags, grouping them into <fieldset /> tags.

$('form').labelWdth();
 

If your template is using another tag for displaying labels, or don’t use <fieldset /> tags, you can specify the correct parameters using jQuery selectors:

$('form').labelWdth({
    fieldset: 'div.group-of-fields',
    label: 'span.field-label'
});
 

You can also specify the min and max label width:

$('form').labelWdth({
    fieldset: 'div.group-of-fields',
    label: 'span.field-label',
    min: 100,
    max: 250
});
 

These are the default values:

{
    fieldset: 'fieldset',
    label: 'label',
    min: 0,
    max: 0    // Means no max width
}
 

That’s all folks

Demonstration

The code used in this demo is:

$('form#form2').labelWidth({ min: 100 });
 

Without labelWidth

Test form

Using labelWidth

Test form