Primefaces 5 selectOneMenu 在 tabView 内错误渲染答案

【问题标题】：Primefaces 5 selectOneMenu incorrectly rendering inside tabViewPrimefaces 5 selectOneMenu 在 tabView 内错误渲染
【发布时间】：2016-04-26 00:33:05
【问题描述】：

我在 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>

【问题讨论】：

无法在当前最新的 PF5 版本中重现您的问题（我只是将您的 XHTML sn-p 复制粘贴到一个完全空白项目中的无模板测试文件中，所有内容都设置为默认值和最新版本）。因此，到目前为止提供的信息中看不到原因。发布 MCVE。如果您不知道怎么做，请阅读stackoverflow.com/tags/jsf/info。
我更新了希望 MCVE 风格的代码
您是否暗示您也无法在一个完全空白的项目中的无模板测试文件中自己重现它，所有内容都设置为默认值和最新版本？因此，模板中至少有一件事情导致了它？
是的，虽然我必须做更多的测试，因为这是以前在同一个文档（和同一个模板）中呈现的，所以虽然模板可能是我不能肯定的原因。我希望得到关于我在代码中可能做错的任何提示
获取尽可能小的代码 sn-p 运行。如果可行，只需将原始代码 sn-p 逐步扣除，直至可能的最小工作 sn-p。一旦它开始工作，那么被移除的部分很可能是最初问题的根源。如果您不明白为什么该部分会导致/表现如此，那么这最终将是一个很好的 Stack Overflow 问题。我们一般对“救命，我不能调试，给我做！”不感兴趣。问题，它们要么因过于宽泛而被关闭，甚至被忽略。

标签： css jsf jsf-2 primefaces

【解决方案1】：

出于某种奇怪的原因，删除模板页面中的面板标签可以解决问题。我通过检查页面找不到任何 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>

【讨论】：