There are three different types for form layouts:
<b:form horizontal="true"/>
tag.
In order to align horizontal forms neatly, add the attributes label-col-xx="4"
and col-xx="8
.
(Of course, you can also use the symbolic names of BootsFaces, such as label-small-screen="one-third"
).<b:form inline="true"/>
. In this case, you have to use the CSS width
attribute to align everything neatly. By default, every component within a row is put close to each other.inline="true"
to the input field. This feature is deprecated (because it generated wrong HTML code). Adding insult to injury, it's
broken since BootsFaces 1.0. You can see such a broken example at the bottom of this page. Please migrate to the
new horizontal forms.Basically, <b:form />
is identical to the standard JSF component <h:form />
.
It adds the attributes inline="true
and horizontal="true"
. These attributes convert
your regular (stacked) form into an one-line inline form or into a multi-line horizontal form.
If you want to put muliple JSF elements into the same line of a horizontal form, you need to add a
<b:formGroup />
. Otherwise, BootsFaces generates a form-group
div
for each component, thus ruining the layout.
About this demo: Most of the examples also demonstrate AJAX. When you move the mouse over a field, it's updated with random input. Two input field types (date picker and multi-select combobox) don't support direct AJAX yet, so they are updated by an extra button.