sections.fluidgrid.stamped.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 specifies elements which are stamped within the layout.
These are special layout elements which will not be laid out by FluidGrid. Rather, FluidGrid will layout
items below stamped elements. To specify stamped elements, use the stamp attribute
which can be any search expression supported by the PrimeFaces Search Expression Framework.
Furtermore, some client-side widget's methods will be demonstrated too. Stamped elements can be
toggled by the widget's method unstamp() and stamp().
The layout can be triggered automatically by the widget's method layout().
Note: When the fluid grid is within a layout pane / unit, it re-layouts itself automatically
on resizing this layout pane / unit. In this case, set the attribute resizeBound
to false to deacivate the re-layouting when resizing the browser window.
/* */
.pe-fluidgrid {
max-width: 1000px;
position: relative;
}
.pe-fluidgrid .pe-fluidgrid-item {
width: 60px;
height: 60px;
background: #D26;
border: 1px solid orange;
border-radius: 5px;
opacity: 0.7;
}
.pe-fluidgrid-item.w2 {width: 120px;}
.pe-fluidgrid-item.w3 {width: 180px;}
.pe-fluidgrid-item.h2 {height: 100px;}
.pe-fluidgrid-item.h3 {height: 130px;}
.pe-fluidgrid .stamp {
position: absolute;
right: 15%;
top: 10px;
width: 50%;
height: 70px;
background: orange;
border: 4px dotted black;
}
${showcase:getFileContent('/sections/fluidgrid/stamped.xhtml')}