Using a panel grid is a convenient way to display a couple of input
fields. BootsFaces aligns your input fields automatically. You don't
have to care about
<b:row> and <b:col>. BootsFaces panel grid adds these tags automatically for you.
The difference to a standard JSF <h:panelGrid>
is that standard JSF generates a simple HTML table. <b:panelGrid /gt; generates a responsive table consisting of
row and col divs.
The simplest way to use the panel grid is to tell it how many columns you need:
If you need to columns of different width, use the col-spans option. This attribute takes a comma-separated
list of integers indicating how many Bootstrap columns are to be spanned:
The size attributes determines when the screen is so small that the columns have to be stacked on top of each other.
The default value is medium-screen (aka md).
The classic use case of <b:panelGrid /> is the input form. In most cases, such an input form is a long list
of fairly uniform rows. The details vary, but usually such a row consists of a label, the input field and an optional error message.
Sometimes there's also a help text. <b:panelGrid /> makes generating such a form a walk in the park:
colSpan="2,10" means the content of the <b:panelGrid> is arranged in to columns. The first colum takes 2 Bootstrap columns (16% of the available space), the second column take the remaining 10 Bootstrap columns (83% of the available space).
| Attribute | Default value | Description |
|---|---|---|
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| col-lg colLg (alternative writing) |
-1 | Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-md colMd (alternative writing) |
-1 | Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-sm colSm (alternative writing) |
-1 | Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-spans colSpans (alternative writing) |
(none) | Comma-separated list of the column spans |
| col-xs colXs (alternative writing) |
-1 | Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| column-classes columnClasses (alternative writing) |
(none) | Comma-separated list of the CSS classes assigned to each column. |
| columns | (none) | Determines the number of equal-sized columns. Simple alternative to col-span. Use col-span if you need columns of different widths. |
| content-disabled contentDisabled (alternative writing) |
false | Enables or disables every child element of this container. By default, child elements are enabled. |
| dir | (none) | Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content). |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| hidden | (none) | This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. |
| id | (none) | Unique identifier of the component in a namingContainer. |
| large-screen largeScreen (alternative writing) |
-1 | Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| medium-screen mediumScreen (alternative writing) |
-1 | Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| offset | (none) | Integer value to specify how many columns to offset. |
| offset-lg offsetLg (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-md offsetMd (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-sm offsetSm (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-xs offsetXs (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| row-classes rowClasses (alternative writing) |
(none) | Comma-separated list of the CSS classes assigned to each row. |
| size | (none) | Optional. Legal values are lg, md, sm and xs. Default is lg. Influences the grid size. |
| small-screen smallScreen (alternative writing) |
-1 | Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| span | (none) | Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| style | (none) | CSS inline style of the div surrounding the panel grid. |
| style-class styleClass (alternative writing) |
(none) | Style class of the div surrounding the panel grid. |
| tiny-screen tinyScreen (alternative writing) |
-1 | Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| tooltip | (none) | The text of the tooltip. |
| tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
| tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |
<b:panelGrid> uses the standard Bootstrap CSS classes:
div bearing the CSS class container.div bearing the CSS class row.div bearing the CSS class col-lg-1 - col-lg-12.