• Settings
    • Locale

      • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources
Input
Calculator ClockPicker CodeScanner Converters CreditCard DynaForm FuzzySearch InputPlace TimePicker
Editors
CodeMirror MarkdownEditor MonacoEditorUpdated SunEditorUpdated
Data
Counter GanttNew KanbanNew MasterDetail MeterGroupNew OrgChartUpdated Sheet TimeAgo Timer
Charts & Maps
EChartsNew GChart Legend OSMapNew QRCode
Panel & Layout
FluidGrid Keynote Layout SlideOut Waypoint
Overlay & Feedback
BlockUI CommandPaletteNew CookiePolicy Session Tooltip
Media
DocumentViewer ImageAreaSelect ImageRotateAndResize ImageZoom
Misc
Clipboard FileDownload Functions/Utils LightSwitch Localized MarkTextNew RemoteCommand Speedtest
Resources
Tag Library GitHub Issues Website PrimeFaces Showcase

FluidGrid

FluidGrid is a cascading grid layout component. It places elements in the optimal position based on the available vertical space, like a mason fitting stones in a wall, and is responsive: the grid reflows as the window size changes. Based on the Masonry JavaScript library.

FluidGrid Tag Documentation

FluidGrid is a masonry-style layout component that arranges items in an optimal position based on vertical space.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client-side widget variable.
fitWidth boolean false false When true, grid fits within the container width.
hGutter int false 0 Horizontal gutter between items in pixels.
hasImages boolean false false When true, images are taken into account for layout (wait for load).
originLeft boolean false true When true, items are laid out from left to right.
originTop boolean false true When true, items are laid out from top to bottom.
resizeBound boolean false true When true, layout is recalculated on window resize.
stamp String false Search expression for element(s) to stamp - hidden during layout.
style String false Inline style for the grid.
styleClass String false Style class for the grid.
transitionDuration String false 0.4s CSS transition duration for layout changes.
vGutter int false 0 Vertical gutter between items in pixels.
value Object true The dynamic data model (e.g. DynaFormModel).
var String false Name of the request-scoped variable that exposes the current row/control data.
varContainerId String false Name of the request-scoped variable that exposes the current container client id.

FluidGridItem Tag Documentation

Defines an item template for a FluidGridItem type; used as a child of FluidGrid.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
styleClass String false Style class for the grid item wrapper.
type String false default Item type identifier; must match a FluidGridItem type in the model.
RESOURCES
Tag Documentation Widget Source
Static items

Static items are defined by pe:fluidGridItem placed multiple times below pe:fluidGrid. Items can have different widths and heights set by style classes. The container has the style class pe-fluidgrid and each item pe-fluidgrid-item. The attributes hGutter and vGutter set the horizontal and vertical space between items. Resize the browser window to test the fluid grid.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Dynamic items

Dynamic items are put in a collection of FluidGridItem instances; each holds a data object and an optional type that matches the type attribute of pe:fluidGridItem. The items are exposed via value and var. hasImages="true" re-layouts the grid after all images have been loaded, so items do not overlap. The event layoutComplete is fired after the layout and all transitions have completed.

Stamped elements within layout

Stamped elements are special layout elements that are not laid out by the grid; items are placed below them. They are set by the stamp attribute, which can be any PrimeFaces search expression. The widget methods stamp() and unstamp() toggle a stamped element and layout() triggers the layout. Inside a layout pane, set resizeBound="false" to deactivate re-layouting on browser resize.

Dynamic form

A responsive dynamic grid with input fields, similar to DynaForm but not a fixed table: resize the browser window. Place the labels above the input fields for a consistent alignment. The type of pe:fluidGridItem must match the type property of FluidGridItem.

Dynamic labels

Dynamic items whose label attribute on input components is bound to the data model via var. Change Items replaces the grid's items to verify that labels are preserved across dynamic updates. Click Submit with empty required fields: each validation message shows its own component's label.

Usage


<div class="card">
    <h5>Static items</h5>
    <p>
        Static items are defined by <code>pe:fluidGridItem</code> placed multiple times below <code>pe:fluidGrid</code>. Items can have
        different widths and heights set by style classes. The container has the style class <code>pe-fluidgrid</code> and each item
        <code>pe-fluidgrid-item</code>. The attributes <code>hGutter</code> and <code>vGutter</code> set the horizontal and vertical
        space between items. Resize the browser window to test the fluid grid.
    </p>
    <style>
        .fg-static .pe-fluidgrid {
            max-width: 900px;
        }

        .fg-static .pe-fluidgrid .pe-fluidgrid-item {
            width: 60px;
            height: 60px;
            border-radius: 5px;
            padding-top: 0.5em;
            text-align: center;
        }

        .fg-static .pe-fluidgrid-item.w2 {width: 130px;}
        .fg-static .pe-fluidgrid-item.w3 {width: 200px;}
        .fg-static .pe-fluidgrid-item.h2 {height: 100px;}
        .fg-static .pe-fluidgrid-item.h3 {height: 130px;}
    </style>
    <h:form id="formStatic">
        <div class="fg-static">
            <pe:fluidGrid hGutter="10" vGutter="10">
                <pe:fluidGridItem styleClass="p-widget-header">Item 1</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header w2 h2">Item 2</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header h3">Item 3</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header h2">Item 4</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header w3">Item 5</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 6</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 7</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header h2">Item 8</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header w2 h3">Item 9</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 10</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header h2">Item 11</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 12</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header w2 h2">Item 13</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header w2">Item 14</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 15</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header h2">Item 16</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 17</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 18</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header h3">Item 19</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header h2">Item 20</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 21</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 22</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header h2">Item 23</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header w2 h2">Item 24</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 25</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 26</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header h3">Item 27</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 28</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header w3">Item 29</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 30</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 31</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header w2">Item 32</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 33</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 34</pe:fluidGridItem>
                <pe:fluidGridItem styleClass="p-widget-header">Item 35</pe:fluidGridItem>
            </pe:fluidGrid>
        </div>
    </h:form>
</div>

<div class="card">
    <h5>Dynamic items</h5>
    <p>
        Dynamic items are put in a collection of <code>FluidGridItem</code> instances; each holds a data object and an optional
        <code>type</code> that matches the <code>type</code> attribute of <code>pe:fluidGridItem</code>. The items are exposed via
        <code>value</code> and <code>var</code>. <code>hasImages="true"</code> re-layouts the grid after all images have been loaded, so
        items do not overlap. The event <i>layoutComplete</i> is fired after the layout and all transitions have completed.
    </p>
    <style>
        .fg-dynamic img {
            margin-top: -4px;
        }
    </style>
    <h:form id="formDynamic">
        <p:growl id="growl" showDetail="true" showSummary="true"/>

        <div class="fg-dynamic">
            <pe:fluidGrid value="#{fluidGridDynamicController.images}" var="image"
                          fitWidth="true" hasImages="true">
                <p:ajax event="layoutComplete" update="growl"
                        listener="#{fluidGridDynamicController.fireLayoutComplete}"/>

                <pe:fluidGridItem>
                    <h:graphicImage library="images" name="fluidgrid/#{image.name}"/>
                </pe:fluidGridItem>
            </pe:fluidGrid>
        </div>
    </h:form>
</div>

<div class="card">
    <h5>Stamped elements within layout</h5>
    <p>
        Stamped elements are special layout elements that are not laid out by the grid; items are placed below them. They are set by
        the <code>stamp</code> attribute, which can be any PrimeFaces search expression. The widget methods <code>stamp()</code> and
        <code>unstamp()</code> toggle a stamped element and <code>layout()</code> triggers the layout. Inside a layout pane, set
        <code>resizeBound="false"</code> to deactivate re-layouting on browser resize.
    </p>
    <style>
        .fg-stamped .pe-fluidgrid {
            max-width: 1000px;
            position: relative;
        }

        .fg-stamped .pe-fluidgrid .pe-fluidgrid-item {
            width: 60px;
            height: 60px;
            background: #D26;
            border: 1px solid orange;
            border-radius: 5px;
            opacity: 0.7;
        }

        .fg-stamped .pe-fluidgrid-item.w2 {width: 120px;}
        .fg-stamped .pe-fluidgrid-item.w3 {width: 180px;}
        .fg-stamped .pe-fluidgrid-item.h2 {height: 100px;}
        .fg-stamped .pe-fluidgrid-item.h3 {height: 130px;}

        .fg-stamped .pe-fluidgrid .stamp {
            position: absolute;
            right: 15%;
            top: 10px;
            width: 50%;
            height: 70px;
            background: orange;
            border: 4px dotted black;
        }
    </style>
    <h:form id="formStamped">
        <div class="fg-stamped">
            <pe:fluidGrid stamp="@(.fg-stamped .stamp)" resizeBound="false" widgetVar="fluidGridStampedWdgt">
                <div class="stamp"></div>

                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header w2 h2"/>
                <pe:fluidGridItem styleClass="p-widget-header h3"/>
                <pe:fluidGridItem styleClass="p-widget-header h2"/>
                <pe:fluidGridItem styleClass="p-widget-header w3"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header h2"/>
                <pe:fluidGridItem styleClass="p-widget-header w2 h3"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header h2"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header w2 h2"/>
                <pe:fluidGridItem styleClass="p-widget-header w2"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header h2"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header h3"/>
                <pe:fluidGridItem styleClass="p-widget-header h2"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header h2"/>
                <pe:fluidGridItem styleClass="p-widget-header w2 h2"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header h3"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header w3"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header w2"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
                <pe:fluidGridItem styleClass="p-widget-header"/>
            </pe:fluidGrid>
        </div>

        <p:commandButton value="Toggle stamped" type="button" style="margin-top:15px;"
                         onclick="toggleFluidGridStamped()"/>
    </h:form>
    <script>
        /* <![CDATA[ */
        window.fluidGridIsStamped = true;

        function toggleFluidGridStamped() {
            // stamp or unstamp element
            if (window.fluidGridIsStamped) {
                PF('fluidGridStampedWdgt').unstamp($(".fg-stamped .stamp").get());
            } else {
                PF('fluidGridStampedWdgt').stamp($(".fg-stamped .stamp").get());
            }

            // trigger layout
            PF('fluidGridStampedWdgt').layout();

            window.fluidGridIsStamped = !window.fluidGridIsStamped;
        }
        /* ]]> */
    </script>
</div>

<div class="card">
    <h5>Dynamic form</h5>
    <p>
        A responsive dynamic grid with input fields, similar to DynaForm but not a fixed table: resize the browser window. Place the labels
        above the input fields for a consistent alignment. The <code>type</code> of <code>pe:fluidGridItem</code> must match the
        <code>type</code> property of <code>FluidGridItem</code>.
    </p>
    <style>
        .fg-dynaform .pe-fluidgrid-item {
            width: 160px;
            height: 60px;
        }

        .fg-dynaform .pe-fluidgrid-item input {
            width: 150px;
        }

        .fg-dynaform .pe-fluidgrid-item.calendar input {
            width: 120px;
        }

        .fg-dynaform .pe-fluidgrid-item.select .p-selectonemenu {
            width: 134px !important;
        }

        .fg-dynaform .dynaFormLabel {
            font-weight: bold;
            margin-bottom: 7px;
        }
    </style>
    <h:form id="formDynaform">
        <p:growl id="growl" showDetail="true" showSummary="true"/>

        <div class="fg-dynaform">
            <pe:fluidGrid id="fluidGrid" value="#{fluidGridDynaFormController.items}" var="data"
                          resizeBound="false" hGutter="20" widgetVar="fluidGridDynaformWdgt" style="width:600px">
                <pe:fluidGridItem type="input">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="txt" value="#{data.label}"/>
                    </div>
                    <p:inputText id="txt" value="#{data.value}" required="#{data.required}"/>
                </pe:fluidGridItem>
                <pe:fluidGridItem type="select" styleClass="select">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="menu" value="#{data.label}"/>
                    </div>
                    <p:selectOneMenu id="menu" value="#{data.value}" required="#{data.required}">
                        <f:selectItems value="#{data.selectItems}"/>
                    </p:selectOneMenu>
                </pe:fluidGridItem>
                <pe:fluidGridItem type="calendar" styleClass="calendar">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="cal" value="#{data.label}"/>
                    </div>
                    <p:datePicker id="cal" value="#{data.value}" required="#{data.required}" showIcon="true"/>
                </pe:fluidGridItem>
            </pe:fluidGrid>
        </div>

        <p:commandButton value="Submit" style="margin-top: 10px;"
                         process="fluidGrid" update="fluidGrid inputValues growl"
                         oncomplete="if(!args.validationFailed) {PF('dynaformValuesWidget').show();}"/>

        <p:dialog header="Input values" widgetVar="dynaformValuesWidget">
            <p:dataList id="inputValues" value="#{fluidGridDynaFormController.items}" var="item"
                        style="margin:10px;">
                <h:outputText value="#{item.data.label} : #{item.data.value}" style="margin-right:15px;"/>
            </p:dataList>
        </p:dialog>
    </h:form>
</div>

<div class="card">
    <h5>Dynamic labels</h5>
    <p>
        Dynamic items whose <code>label</code> attribute on input components is bound to the data model via <code>var</code>.
        <b>Change Items</b> replaces the grid's items to verify that labels are preserved across dynamic updates. Click <b>Submit</b>
        with empty required fields: each validation message shows its own component's label.
    </p>
    <style>
        .fg-dynlabels .pe-fluidgrid-item {
            width: 180px;
            height: 65px;
        }

        .fg-dynlabels .pe-fluidgrid-item input {
            width: 170px;
        }

        .fg-dynlabels .dynLabel {
            font-weight: bold;
            margin-bottom: 5px;
        }
    </style>
    <h:form id="formDynamicLabels">
        <p:growl id="growl" showDetail="true" showSummary="true"/>

        <p:commandButton value="Change Items" action="#{fluidGridDynamicLabelsController.changeItems}"
                         process="@this" update="fluidGrid" style="margin-bottom:10px"/>

        <div class="fg-dynlabels">
            <pe:fluidGrid id="fluidGrid" value="#{fluidGridDynamicLabelsController.items}" var="data"
                          resizeBound="false" hGutter="20" style="width:450px">
                <pe:fluidGridItem type="input">
                    <div class="dynLabel">
                        <p:outputLabel for="txt" value="#{data.label}"/>
                    </div>
                    <p:inputText id="txt" value="#{data.value}" label="#{data.label}" required="#{data.required}"/>
                </pe:fluidGridItem>
            </pe:fluidGrid>
        </div>

        <p:commandButton value="Submit" style="margin-top: 10px;"
                         process="fluidGrid" update="fluidGrid inputValues growl"
                         oncomplete="if(!args.validationFailed) {PF('dynamicLabelsValuesWidget').show();}"/>

        <p:dialog header="Submitted Values" widgetVar="dynamicLabelsValuesWidget">
            <p:dataList id="inputValues" value="#{fluidGridDynamicLabelsController.items}" var="item"
                        style="margin:10px;">
                <h:outputText value="#{item.data.label} : #{item.data.value}" style="margin-right:15px;"/>
            </p:dataList>
        </p:dialog>
    </h:form>
</div>
PrimeFaces Extensions v17.0.0-SNAPSHOT on PrimeFaces v17.0.0-SNAPSHOT | Apache MyFaces Core 4.0 - API 4.0.3