FluidGrid allows to set up a nice tight grid with items that have variable heights and widths. FluidGrid is a responsive grid. That means, the grid will reflow as the window size changes. Items can have any content: text, images, links, input fields, etc. They can be defined in a static or in a dynamic way as in data iteration components.

This example demonstrates how to design a responsive dynamic grid with input fields. This is similar to the DynaForm component in PrimeFaces Extensions, but the grid is not a fixed table in this case. It is responsive! Try to resize the browser window. Tip: You will achieve a consistent alignment across all field blocks if you place the labels above the input fields.

The attribute type of pe:fluidGridItem should match the corresponding type property of FluidGridItem.

.pe-fluidgrid-item { width: 160px; height: 60px; } .pe-fluidgrid-item input { width: 150px; } .pe-fluidgrid-item.calendar input { width: 120px; } .pe-fluidgrid-item.select .ui-selectonemenu { width: 134px !important; } .dynaFormLabel { font-weight: bold; margin-bottom: 7px; }
${showcase:getFileContent('/sections/fluidgrid/dynaform.xhtml')} ${showcase:getFileContent('/org/primefaces/extensions/showcase/controller/fluidgrid/FluidGridDynaFormController.java')} ${showcase:getFileContent('/org/primefaces/extensions/showcase/model/fluidgrid/DynamicField.java')}