Center LayoutPane is not adjusting its size

jonasjm · 21 Feb 2018, 12:20

Hi,

I'm currently working on a Page with a Semantic-UI sidebar (https://semantic-ui.com/modules/sidebar.html) which is pinnable and pushes the site's content when pinned.

My issues is that whenever the menu is pinned, my center layoutPane does not adjusts its size. It just gets pushed outside its parent box where it isn't visible any longer.
I'm not sure how to properly describe my issues. I hope someone has faced something similar and can help me out here.

Let me know if you need further information.

my XHTML:

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions"
                template="/WEB-INF/template.xhtml">
                
    <ui:define name="title">Business Attributes</ui:define>

    <ui:define name="viewname">Business Attributes</ui:define>

    <ui:define name="content">
        <div class="ui-g">
            <div class="ui-g-12">
                <div class="card">
                    <pe:layout fullPage="false" resizerTip="Resize" togglerTipClosed="Close" togglerTipOpen="Open" sliderTip="Slide" style="width: auto; height: 750px;">

                        <pe:layoutPane position="north" resizable="true">
                            north
                        </pe:layoutPane>
                        
                        <pe:layoutPane position="center" resizable="true">
                           center
                        </pe:layoutPane>
                        
                    </pe:layout>
                </div>
            </div>
        </div>
    </ui:define>

</ui:composition>

my template:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title><ui:insert name="title">title</ui:insert></title>
        <h:outputScript name="js/nanoscroller.js" library="california-layout" />
        <h:outputScript name="js/layout.js" library="california-layout" />
        <ui:insert name="head"/>
    </h:head>

    <h:body styleClass="main-body">

        <!-- Overlay: layout-wrapper-overlay-sidebar, remove the class when default -->
        <div class="layout-wrapper layout-wrapper-overlay-sidebar">
            <ui:include src="./megamenu.xhtml" />
            <ui:include src="./topbar.xhtml" />
            <ui:include src="./sidebar.xhtml" />
            <ui:include src="./right-sidebar.xhtml" />

            <div class="layout-main">
                <div class="route-bar">
                    <div class="route-bar-breadcrumb">
                        <p:link class="menu-button" href="#">
                            <i class="fa fa-bars"></i>
                        </p:link>
                         
                    </div>

                    <ui:include src="./route-bar-menu.xhtml" />
                </div>

                <div class="layout-main-content">
                    <ui:insert name="content"/>
                </div>

                <ui:include src="./footer.xhtml" />
            </div>
        </div>

        <p:ajaxStatus style="width:32px;height:32px;position:fixed;right:7px;bottom:7px">
           <f:facet name="start">
               <i class="fa fa-circle-o-notch fa-spin ajax-loader" aria-hidden="true"></i>
           </f:facet>

           <f:facet name="complete">
               <h:outputText value="" />
           </f:facet>
       </p:ajaxStatus>

        <h:outputStylesheet name="css/nanoscroller.css" library="california-layout" />
        <h:outputStylesheet name="css/layout-bluegrey.css" library="california-layout" />
    </h:body>

</html>

21 Feb 2018, 16:23

I just found this on the Jquery UI Layout which is what this component is based on.

https://groups.google.com/forum/#!topic ... IfcS3Pdrfg

The center pane is not directly sizeable or resizable. The center pane "gets what is left over" after the other panes have been sized.

It also offers some suggested workarounds that I have not tried.

jonasjm · 21 Feb 2018, 17:08

Is there a way to force the center pane to update its size?

If I pin the menu and then open the inspector, for example, the pane's size is somehow updated and has the correct size.

21 Feb 2018, 17:21

You can try and force it to update calling the following Javascript method.

Try it in Chrome Console.

Code: Select all

PF('layoutWidget').resizeAll();

Where "layoutWidget" is the name of your widgetVar.

Center LayoutPane is not adjusting its size

Who is online