我在PF tabView中有一个selectOne菜单:
<ui:composition template="./../../../ClientSimple.xhtml">
<ui:define name="top">
<h2>Public Cloud Menu</h2>
</ui:define>
<ui:define name="content">
<h:form id="treelist">
<p:tabView>
<p:tab id="dattab" title="Data">
<p:selectOneMenu id="datmen" value="#{clientDataBean.marketid}">
<f:selectItems value="#{marketbean.allMarksNorm}" var="mark"
itemLabel="#{mark.marketname}"
itemValue="#{mark.marketid}"/>
</p:selectOneMenu>
</p:tab>
</p:tabView>
</h:form>
</ui:define>
</ui:composition>
视图完全失真,菜单的顶部显示在页面的顶部,菜单的其余部分显示在页面的底部。
如果我更改为h:selectOneMenu,则所有内容都会完美呈现,但我更喜欢使用PF组件。模板页面为:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>
<h:outputStylesheet name="./css/paceradar.css"/>
<h:outputStylesheet name="/css/paceradar.css"/>
<h:outputScript name="/js/pace.js"/>
<h:form>
<title>Client Module</title>
<p:panel style="text-align: right;">
<p:commandLink value="#{secBean.username}" style="margin-left: 10px;"
action="#{secBean.showProfiles}"
rendered="#{secBean.showUser}"
/>
<p:spacer width="40"/>
<p:commandLink id="loginbutt" value="Login" action="#{secBean.loginForm}"
process="loginbutt"
rendered="#{secBean.login}"/>
<p:commandLink id="logout" value="Logout" action="#{secBean.logout}"
process="logout"
rendered="#{secBean.showUser}"/>
</p:panel>
<h:link outcome="/EnliteWelcome.xhtml">
<p:graphicImage value="/resources/images/logo.png" />
</h:link>
</h:form>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:body>
最佳答案
出于某些奇怪的原因,删除模板页面中的面板标签可以解决该问题。通过检查页面,我找不到任何CSS冲突。我首先认为面板可能会溢满并弄乱边际。我修改了“溢出”,将其设置为隐藏,然后尝试其他设置,但这并不能解决任何问题。问题已解决,但我不明白为什么专家组是罪魁祸首。
<h:form>
<title>Client Module</title>
<p:commandLink value="#{secBean.username}" style="margin-left: 10px;"
action="#{secBean.showProfiles}"
rendered="#{secBean.showUser}"
/>
<p:spacer width="40"/>
<p:commandLink id="loginbutt" value="Login" action="#{secBean.loginForm}"
process="loginbutt"
rendered="#{secBean.login}"/>
<p:commandLink id="logout" value="Logout" action="#{secBean.logout}"
process="logout"
rendered="#{secBean.showUser}"/>
<h:link outcome="/EnliteWelcome.xhtml">
<p:graphicImage value="/resources/images/logo.png" />
</h:link>
</h:form>