I'm trying to use PrimeFaces extensions' (3.2) layout. But it's throwing me the following error:
我正在尝试使用PrimeFaces extensions(3.2)布局。但它给了我以下的错误:
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.
在代码中,我用中心位置声明一个layoutPane,但是它会向我抛出错误。
Additional information: I'm using,
附加信息:我使用,
- PrimeFaces 4.0
- PrimeFaces 4.0
- PrimeFaces Extensions 3.2.0
- PrimeFaces扩展3.2.0
- Mojarra 2.2.7
- 银鲈2.2.7
- JDK 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?
编辑:我发现问题在于它是通过模板页面的
1 个解决方案
#1
2
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="false
to 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.
问题是布局试图使用整个页面作为布局,而body标记是父元素,因为还有其他html,所以无法找到中心面板。如果将fullpage="false "添加到布局标记中,则如下所示。生成的布局将在表中创建一个div,用作外部布局容器,而不是body标记。
<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.
请注意。您可能需要另外添加样式=“100%”,因为当使用以下代码来执行include和添加fullpage=“false”时,会出现一个额外的初始化错误,该布局窗格没有高度……因此被看不见的。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html style="height:100%;" xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<f:view locale="en">
<h:head>
<h:outputScript library="javax.faces" name="jsf.js" />
</h:head>
<h:body style="height:100%;">
<table style="height:100%; width:100%;">
<tr>
<th>Layout</th>
</tr>
<tr>
<td style="height:100%;"><ui:include src="PELayoutInclude.xhtml" /></td>
</tr>
</table>
</h:body>
</f:view>
</html>
#1
2
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="false
to 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.
问题是布局试图使用整个页面作为布局,而body标记是父元素,因为还有其他html,所以无法找到中心面板。如果将fullpage="false "添加到布局标记中,则如下所示。生成的布局将在表中创建一个div,用作外部布局容器,而不是body标记。
<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.
请注意。您可能需要另外添加样式=“100%”,因为当使用以下代码来执行include和添加fullpage=“false”时,会出现一个额外的初始化错误,该布局窗格没有高度……因此被看不见的。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html style="height:100%;" xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<f:view locale="en">
<h:head>
<h:outputScript library="javax.faces" name="jsf.js" />
</h:head>
<h:body style="height:100%;">
<table style="height:100%; width:100%;">
<tr>
<th>Layout</th>
</tr>
<tr>
<td style="height:100%;"><ui:include src="PELayoutInclude.xhtml" /></td>
</tr>
</table>
</h:body>
</f:view>
</html>