sections.fluidgrid.dynaform.xhtml Maven / Gradle / Ivy
The newest version!
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')}