Ant
no notes

A Form Fit For Every Occassion

Here is a method of HTML mark-up css and JS which allow your forms to be suited for any occasion, slim or wide the controls slip about to fit neatly in the space available.

Take this complex form

with multiple sections and multiple control rows...

Lets slim it up a bit ...

Some more dieting ...

And going totally Kate

So what is going on then?

The form is able to resize down to the width of the widest single element by popping the elements down a row when width gets too restricted. This is done by a three line attack, HTML, CSS and finally JS.

The HTML mark-up

The mark-up is structured like so

FORM

+ FIELDSET

+ OL

+ LI

+ DIV.control

+ LABEL

+ DIV.fIeld

+ DIV.control

+ LABEL
+ DIV.fIeld

+ LI

+ FIELDSET

+ OL

Each control is a label and div containing the field, this allows both elements to move as one when popping on to a new row. It also allows for percentage widths to be placed on the DIV.control to line up the controls nicely.

An ordered list give us the rows and fieldsets the sections.

The CSS

The control CSS provides a container for the Label and DIV.field, where you set the width and the contents flow to take up the available space.

fieldset .control
{
    float:left;
    padding:.4em 0 .1em;
}
fieldset .control label
{
    float:left;
    width:5.5em;
    text-align:right;
}
fieldset .field
{
    margin-left:6em;
    margin-right:1em;
}

Each control is floated left, and you can add your own breaks to define the controls position with in each row.

At this point when you shink the form the CSS can handle getting every control onto a separate row (fig 2 and 3) but to get the full shrinkage we need to use a bit of JS

The JavaScript

Guess what, I'm going to use jQuery here, this will check the widths of the form and the controls and change their CSS or add a CSS class where needed

$(window)
    .ready(setForm)
    .resize(setForm);

function setForm() {
    $("form").each(function () {
        var $el = $(this);
        if ($el.width() < 280) {
            $el.addClass("narrow");
        } else {
            $el.removeClass("narrow");
        }
    });
    $(".control").each(function () {
        var $el = $(this);
        if ($el.hasClass("w50")) {
            $el.css("width","")
            if($el.width() < 250) $el.css("width", "100%");
        }
    });
}

I've plopped this all into a single file ('ceptin jQuery which is on the ms CDN) for you to squeeze until its i's pop out of its <head> (urgg)

^ top

Post a Note

(required)

(required never shown)

^ top

On Twitter Follow MrAntix on Twitter

15/05/2012
WindowsAzure
Announcing the MEET Windows Azure Event! Streamed online June 7th. Register at http://t.co/bObzTAuL  #MEETAzure #WindowsAzure

10/05/2012
kevinwhinnery
Comparing Titanium and PhoneGap - A common question I get asked at developer events and conferences is how... http://t.co/Zq2eND6B

09/05/2012
brianleroux
PhoneGap goals and philosophy: http://t.co/wkq8wI2T

just now
satonaoki
RT @WindowsAzure: The Bing Search API on #WindowsAzure Marketplace is Here!  http://t.co/GLILFMYe

just now
itsacloudyworld
Latest The Bing Search API on Windows Azure Marketplace is Here! http://t.co/S9K9cRwm