sections.fluidgrid.dynaform.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 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')}