sections.fluidgrid.stamped.xhtml Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of primefaces-extensions-showcase Show documentation

There is a newer version: 1.1.0.6-jre15

Show 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')}