Primefaces 5 selectOneMenu错误地呈现在tabView中

Question

I have a selectOne menu inside a PF tabView:

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

The view is totally distorted with the top part of the menu appearing at the top of the page and the rest of the menu appearing at the bottom.

If I change to h:selectOneMenu everything renders perfectly, but I'd prefer to use the PF component. The template page is:

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

Answer 1

For some odd reason, removing the panel tag in the template page solves the problem. I couldn't find any css conflicts from inspecting the page. I first thought that the panel could be overflowing and messing up the margins. I modified the 'overflow', setting it to hidden and trying different settings but this didn't solve anything. The problem is solved but I don't understand why the panel is the culprit.

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