I'm trying to use PrimeFaces extensions' (3.2) layout.
But it's throwing me the following error:
My code looks like this:
<ui:composition xmlns:pe="http://primefaces.org/ui/extensions">
<h:form>
<pe:layout resizerTip="Resize Me" togglerTipClosed="Open Me" togglerTipOpen="Close Me">
<pe:layoutPane position="north" size="80" closable="false">
North
</pe:layoutPane>
<pe:layoutPane position="center">
<pe:layoutPane position="north" size="50%">
<f:facet name="header">
<h:outputText value="Center-North"/>
</f:facet>
</pe:layoutPane>
<pe:layoutPane position="center" minHeight="60">
<f:facet name="header">
<h:outputText value="Center-Center"/>
</f:facet>
</pe:layoutPane>
</pe:layoutPane>
<pe:layoutPane position="west" size="200">
<pe:layoutPane position="north" size="33%">
West-North
</pe:layoutPane>
<pe:layoutPane position="center" minHeight="60">
West-Center
</pe:layoutPane>
<pe:layoutPane position="south" size="33%" initClosed="true">
West-South
</pe:layoutPane>
</pe:layoutPane>
<pe:layoutPane position="east" size="200" resizeWhileDragging="true">
East
</pe:layoutPane>
<pe:layoutPane position="south" size="80">
South
</pe:layoutPane>
</pe:layout>
</h:form>
In the code, I state a layoutPane with center position, yet it's throwing me the error.
Additional information: I'm using,
- PrimeFaces 4.0
- PrimeFaces Extensions 3.2.0
- Mojarra 2.2.7
- JDK 7
EDIT: I've found out that the problem is because It's being inserted through a <ui:insert> from a template page. That template page is constructed by <table> and removing the <table>'s it works, but I do need the tables because that's from my main template. Is there a way to work around that, or update the table for a compatible component?
The issue is the layout is trying to use the full page for the layout with the body tag being the parent element and because there is other html it is unable to find the center panel. if you add
fullpage="falseto your layout tag so it would look something like below. the generated layout will create a div within the table to use as the outer layout container instead of the body tag.<pe:layout resizerTip="Resize Me" togglerTipClosed="Open Me" togglerTipOpen="Close Me" fullpage="false" style="100%;">Note. You will probably need to additionally add
style="100%"because when the following code was used to do an include and added fullpage="false" There was an additional Initialization error of the layout panes having no height... and thus being invisible.