Center LayoutPane is not adjusting its size
Posted: 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:
my template:
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>
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>