Question

I create a simple dialog form with jquery UI.

Html code :

<div id="newarticle-form" title="Cr&eacute;ation nouvel article">
    <p class="validateTips">Tous les champs sont requis.</p>

    <form>
    <fieldset>
        <p><label for="validite" class="label-class">Date de validit&eacute;</label>
        <input type="text" name="validite" id="validite" size="10" maxlength="10" class="text input-class" /></p>
        <label for="libelle" class="label-class">Libell&eacute;</label>
        <input type="text" name="libelle" id="libelle" size="50" maxlength="100" class="text input-class" />
        <label for="email" class="label-class">Description</label>
        <input type="text" name="description" id="description" value="" size="50" maxlength="250" class="text input-class" />
        <label for="pu" class="label-class">Prix unitaire</label>
        <input type="text" name="pu" id="pu" value="" size="10" maxlength="10" class="text input-class" />
    </fieldset>
    </form>
</div>

And the javascript/jquery code :

$(function() {  
    $( "#newarticle-form" ).dialog({
        autoOpen: false,
        height: 400,
        width: 800,
        modal: true,
        resizable:false,
        buttons: {
            "Ajouter l'article": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );
            },

            "Fermer": function() {
                $( this ).dialog( "close" );
            }
        },

        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        },
    });

    $( "#New" )
        .click(function() {
            $( "#newarticle-form" ).dialog( "open" );
    });

});

Some usefull CSS :

.label-class {
    display: block;
    width: 150px;
    float: left;
    text-align: right;
    padding-right: 10px;
}

.input-class {
    float: left;
    margin-bottom: 10px;
}

All works fine… but the fields are completely disorganized.

To align correctly, I must give a total size to each field the almost equal size of the width of the dialogbox ! So, a 5 chars long field must be stretched to the largest field (50 chars) : all is well aligned but it looks quite ugly !

What can I do ?

Answer 1

Add clear:left; to your .label-class

This will make sure that the label will align properly.