• Home
• com.guicedee.examples.faces
• primefaces-extensions-showcase
• 1.1.0.6
• source code
• customContentLayout.xhtml

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

sections.layout.customContentLayout.xhtml Maven / Gradle / Ivy

    
        
            
        
        
            To place any custom content between layout panes there are three alternative ways:
            

            

                

                    Place a nested layout pane (pe:layoutPane) within a div element with the class "ui-layout-content".
                    This approach is applied in this example.
                
                

                    Add the option "containerSelector" to child options (see LayoutOptions class).
                    The value of "containerSelector" points to a wrapper-div element which acts as a container for nested layout panes.
                
                

                    Use the header facet (f:facet name="header") for any custom content. This is very handy. For instance,
                    if you place messages there, they will be always visible because only pane's inner "content container" gets scrollbars.
                    The header facet always stays fixed. This approach is demonstrated in this example.
                
            
            Note: Use the widget's method sizeContent(pane) to manually trigger a resize
            from your own code when the custom content between layout panes gets updated and changes its size.
            sizeContent(pane) resizes the "content container" inside the specified pane
            (e.g. sizeContent('center_west')). Content is resized automatically when the pane is resized or opened,
            so this method only needs to be called manually if something "changes the height" of a header or footer element in the pane.
            

            Please refer examples on the plugin homepage to see how it works in detail.
        

        
            
                
            
        

        
            
${showcase:getFileContent('/sections/layout/example-customContent.xhtml')}
                
// Included page with nested child layout
                
${showcase:getFileContent('/sections/layout/example-customContentOne.xhtml')}
            
            
${showcase:getFileContent('/org/primefaces/extensions/showcase/controller/layout/CustomContentLayoutController.java')}