-
Notifications
You must be signed in to change notification settings - Fork 7.6k
SuperModel::Html Output
Category:Libraries::SuperModel
The output of the form is meant to be as versatile as possible for formatting with CSS.
Sample output:
[code]
In this example, the model name is [b]user_model[/b]. It gets prepended to the id elements so that it's possible to use multiple forms (from different models) on the same page.
The container div is always named as [b][em]modelname[/em]_[em]fieldname[/em]container[/b]. The actual input control is always named [b][em]modelname[/em][em]fieldname[/em][/b]. Nothing else gets a specific name, as it can be specified from CSS using combinations of the container id and class accessors.
In most cases, the CodeIgniter [url=http://codeigniter.com/user_guide/helpers/form_helper.html]form helper[/url] is used to actually output the <input> tags.
The [b]form_field_error[/b] div only appears if there is an actual error. [b]form_field_footer[/b] never contains anything, it is simply there for formatting (ie, to use for clearing).
[h3]Margin formatting[/h3]
Here is a style that has the label to the left of the control, with all the controls ligned up [b]10em[/b] from the left of the labels. If there is an error, it shows up underneath the label/control line.
[code] .form_field_container { position:relative; clear:both; padding: 0.5em 0 0.5em 0; } .form_field_label { float:left; width:10em; text-align:right; margin-top: 0.2em; } .form_field_control { float:left; padding-left:0.2em; } .form_field_error { color:red; padding-top:0.4em; clear:both; } .form_field_footer { clear:both; } [/code]
[h3]Text-on-top[/h3]
This example puts the text on top of the control, with the error text to the right.
[code] .form_field_container { clear:both; } .form_field_label { } .form_field_control { } .form_field_error { color:red; float:right; } .form_field_footer { clear:both; } [/code]
[h3]Add semi-colon after label[/h3]
[code] /* psuedo-element, not supported directly in IE, but works with IE7 http://dean.edwards.name/IE7/ */ .form_field_label label::after { content: ":"; } [/code]