Some forms fields (radio, checkbox, select) will not be styled in IE7/IE8 because they do not support the required CSS.

For the form layout examples below, the only thing that changes is a class on the fieldset.

Layout - Stacked Form (Default)

* ! Required Text

Password

! * Select

Multiple text fields: - Serial Number part 2
e.g. WMEV-86331212

! * Checkboxes: Platform This is checked This is not checked This is disabled This is checked and disabled

Radio Buttons: Contact Type This is normal This is normal This is disabled This is checked and disabled

Textarea

File

Layout - Table Form

Acts like a table. The label column acts like it is made out of <td> elements where the widest label dictates the width of the column. Simply add a table class somewhere between the .ixf-form element and the <dl> elements.

* ! Required Text

Password

! * Select

Multiple text fields: - Serial Number part 2
e.g. WMEV-86331212

! * Checkboxes: Platform This is checked This is not checked This is disabled This is checked and disabled

Radio Buttons: Contact Type This is normal This is normal This is disabled This is checked and disabled

Textarea

File

Layout - Stretchy Form

input and textarea elements stretch to take up as much room as possible. Simply add a stretchy class somewhere between the .ixf-form element and the <dl> elements.

* ! Required Text

Password

! * Select

Multiple text fields: - Serial Number part 2
e.g. WMEV-86331212

! * Checkboxes: Platform This is checked This is not checked This is disabled This is checked and disabled

Radio Buttons: Contact Type This is normal This is normal This is disabled This is checked and disabled

Textarea

File

Layout - Flowing Form

Heads up: You should have a solid business reason to use this form type since they tend to be less usable.

Each field/label pair float left and then wrap when they need to.

* ! Required Text

Password

! * Select

Multiple text fields: - Serial Number part 2
e.g. WMEV-86331212

! * Checkboxes: Platform This is checked This is not checked This is disabled This is checked and disabled

Radio Buttons: Contact Type This is normal This is normal This is disabled This is checked and disabled

Textarea

File

Read Only

This is for a textual representation of a form for use on view pages. This does not take a normal form and make it text only.

Input/textarea sizes

The set sizes that are available for inputs and textareas.

Horizontal radio/checkboxes

You can have radio buttons and checkboxes stack horizontally. Just add a class of .options-horizontal above the ixf-option elements. Likely in the <dd> element.

Action Bar

The action bar will automatically be placed at the bottom of the panel it is contanined in. It will resize and reposition as a user resizes the window or panels.

The IxF automatically puts a placeholder in place wherever the action bar code was first located. This makes sure that content doesn't get stuck behind the actionbar where you wouldn't be able to interact with it.

Save Cancel