In-place Editing :: Form Components :: Forms :: COLOURCode

Summary of features

In-place editing is made possible by the X-Editable plug-in, which has been integrated into the COLOURcode template. See the x-editable website for full documentation. Further to this, the template features two bespoke CSS classes that enable you to easily style your layout like a normal responsive form with .pseudo-label and .pseudo-input.

At a glance

Choose between pop-up or in-line modes.
Sends ajax request with new value to /post.
CSS includes .pseudo-label and .pseudo-input.

X-Editable popup mode ( default panel )

Basic text field:

Text field (required):

Select field:

Combodate, date:

Combodate, datetime:

Textarea:

Enter away here!

Checklist:

Choose your fruits!

X-Editable inline mode ( default panel )

Basic text field:

Text field (required):

Select field:

Combodate, date:

Combodate, datetime:

Textarea:

Enter away here!

Checklist:

Choose your fruits!

This template adds two new classes that are perfect for x-editable: .pseudo-label and .pseudo-input. When applied to non-form divs such as above, they give the look of a form and reformat themselves at smartphone size to give the equivalent of a vertical form with appropriate visual grouping.

X-Editable popup mode ( in brand1 panel )

Basic text field:

Text field (required):

Select field:

Combodate, date:

Combodate, datetime:

Textarea:

Enter away here!

Checklist:

Choose your fruits!

X-Editable inline mode ( in brand1 panel )

Basic text field:

Text field (required):

Select field:

Combodate, date:

Combodate, datetime:

Textarea:

Enter away here!

Checklist:

Choose your fruits!

This template adds two new classes that are perfect for x-editable: .pseudo-label and .pseudo-input. When applied to non-form divs such as above, they give the look of a form and reformat themselves at smartphone size to give the equivalent of a vertical form with appropriate visual grouping.