Loading...
 

History: Bootstrap Transition - Forms

Preview of version: 1

 There are many forms in Tiki's Smarty template files, and generally these need to be modernized and make Bootstrap-compatible.

For example, code like:

<form>
<table class="formcolor" width="100%">
	<tr>
		<td><label for="anonymous_name">
Question Plugin disabled
Plugin tr cannot be executed.
Name{/tr}</label></td> <td><input type="text" maxlength="50" size="30" id="anonymous_name" name="anonymous_name" value="{$comment_preview_data.name|escape}"></td> </tr> </table> </form>


Needs to be changed to something like:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="anonymous_name" class="col-sm-2 control-label">
Question Plugin disabled
Plugin tr cannot be executed.
Name{/tr}</label> <div class="col-sm-10"> <input type="text" maxlength="50" class="form-control" id="anonymous_name" name="anonymous_name" value="{$comment_preview_data.name|escape}"> </div> </div> </form>


Class="form-horizontal" uses Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout. Class="form-group" groups a label and input and gives them some bottom white space. Class="control-label" gives the label some spacing and aligns the text to the right. Class="form-control" adds styling to the input and makes its width 100%. The width can be controlled by wrapping the div in one of the grid-class divs, if needed.

Form construction style guide needed

Other general practices will follow, here. We should have a guide so any forms added in the future can be made the same way and have a unified appearance.

Although the construction of some admin pages, etc. was updated, the templates directory still (as of Dec. 8, 2013) contains 218 usages of table class="formcolor", which as a rule has been used for form layout in Tiki. So the task continues.

History

Advanced
Information Version
Wed 05 of Aug, 2015 09:40 GMT chibaguy 26
Wed 05 of Aug, 2015 09:26 GMT chibaguy Breakpoint display size item added. 25
Wed 05 of Aug, 2015 07:33 GMT chibaguy 24
Wed 05 of Aug, 2015 07:03 GMT chibaguy 23
Wed 05 of Aug, 2015 07:01 GMT chibaguy 22
Wed 05 of Aug, 2015 06:52 GMT chibaguy 21
Thu 30 of Jul, 2015 07:03 GMT gezza extending with breakpoint notes 20
Thu 30 of Jul, 2015 07:01 GMT gezza notes about various label sizes 19
Thu 30 of Jul, 2015 06:00 GMT chibaguy 18
Tue 28 of Jan, 2014 10:22 GMT gezza opinion update 17
Tue 28 of Jan, 2014 06:49 GMT chibaguy popup images removed - not useful. 16
Tue 28 of Jan, 2014 06:47 GMT chibaguy Bad copy/paste removed. 15
Tue 28 of Jan, 2014 06:41 GMT chibaguy 14
Tue 28 of Jan, 2014 06:39 GMT chibaguy 13
Sat 25 of Jan, 2014 13:20 GMT luci 12
Sat 25 of Jan, 2014 12:23 GMT gezza 11
Sat 25 of Jan, 2014 12:22 GMT gezza 10
Sat 25 of Jan, 2014 12:19 GMT gezza form input layout options 9
Sun 08 of Dec, 2013 12:54 GMT chibaguy Code corrected. 8
Sun 08 of Dec, 2013 12:52 GMT chibaguy Textarea added. 7
Sun 08 of Dec, 2013 12:46 GMT chibaguy Select layout added. 6
Sun 08 of Dec, 2013 03:47 GMT chibaguy 5
Sun 08 of Dec, 2013 03:46 GMT chibaguy 4
Sun 08 of Dec, 2013 03:45 GMT chibaguy 3
Sun 08 of Dec, 2013 03:43 GMT chibaguy 2
Sun 08 of Dec, 2013 03:42 GMT chibaguy Page created. 1

Switch Theme

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config