Menubar display under panel

Question

I have follows parant view page:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">

<f:view encoding="UTF-8" contentType="text/html">

    <ui:insert name="metadata"/>

    <h:head>
        <h:outputStylesheet name="sms.css"/>
        <ui:insert name="header"/>
    </h:head>

    <h:body>
        <ui:insert name="layout">
            <pe:layout id="main_layout" togglerTipClosed="Показать" togglerTipOpen="Спрятать" widgetVar="mainLayoutVar">
                <pe:layoutPane position="north" resizable="true" closable="false">
                    <ui:insert name="mainMenu">
                        <ui:include src="MenuFrame.xhtml"/>
                    </ui:insert>
                </pe:layoutPane>

                <pe:layoutPane id="content_body" position="center">
                    <ui:insert name="body"/>
                    <ui:insert name="dialogs"/>
                </pe:layoutPane>

                <pe:layoutPane position="south" resizable="false" closable="false">
                    <ui:include src="FooterFrame.xhtml"/>
                </pe:layoutPane>
            </pe:layout>
        </ui:insert>

        <p:growl id="msg_warn" for="arg_msg_for_warn" showDetail="true" sticky="true"/>
        <p:growl id="msg_info" for="arg_msg_for_info" showDetail="true"/>
        <p:growl id="msg_error" showDetail="true" autoUpdate="true" sticky="true" redisplay="false"/>
    </h:body>

</f:view>

</html>

Other pages extends from this page where overriding body block. Also I have default menu frame that include in parent view:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <h:form id="main_menu_form">
        <p:menubar>
            <p:submenu label="Списки" icon="fa fa-list">
                <p:menuitem value="Клиенты" url="/view/client/ClientListView.xhtml" icon="fa fa-group"/>
                <p:menuitem value="Склады" url="/view/storage/StorageListView.xhtml" icon="fa fa-archive"/>
            </p:submenu>
            <f:facet name="options">
                <p:commandButton type="button" icon="fa fa-info"/>
            </f:facet>
        </p:menubar>
    </h:form>

</ui:composition>

The problem is that Subitems components from Menubar displaying under center panel:

Your question doesn't have a question. You show the problem, but you don't say how you want to have it. (We could guess, but if we guess wrong we've spent our time for nothing...) — Cindy Meister, Nov 23 '15 at 19:27
I added all that is connected with my problem. In `View.xhtml` you can see how are placed `layoutpane` for `header(mainMenu)`, `body`(that overrides child views), `footer`.. so I gave `MainFrame.xhtml` which shows code for menu, which hiding under the central panel. I don't know what add else. — HAYMbl4, Nov 23 '15 at 19:37
My group had several problems like these crop up when i used pe:layout and p:layout. Cagatay Civici advised us to use regular old divs and css to create our layouts. Try without pe:layout — Mahendran Ayyarsamy Kandiar, Nov 23 '15 at 20:01
Possible duplicate of [primefaces menu cant fully display out in fullpage layout](http://stackoverflow.com/questions/9157327/primefaces-menu-cant-fully-display-out-in-fullpage-layout) — Kukeltje, Nov 23 '15 at 21:34

score 1 · Answer 1 · answered Nov 23 '15 at 19:27

1

Can you set style="zIndex: 9999" for the Menubar or the Subitems? This will render them on top (at rank 9999)

answered Nov 23 '15 at 19:27

CoderPi

12,985
4
34
62

Thank you, but it does not change situation – HAYMbl4 Nov 23 '15 at 19:45

score 0 · Accepted Answer · edited May 23 '17 at 11:44

I found solution for my problem for menu pe:layoutPane need set follows element attributes:

#menu_panel {
    z-index: 1 !important;
    overflow: visible;
}

Finil code for View.xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">

<f:view encoding="UTF-8" contentType="text/html">

    <ui:insert name="metadata"/>

    <h:head>
        <h:outputStylesheet name="sms.css"/>
        <ui:insert name="header"/>
    </h:head>

    <h:body>
        <ui:insert name="layout">
            <pe:layout id="main_layout" togglerTipClosed="Показать" togglerTipOpen="Спрятать" widgetVar="mainLayoutVar">
                <pe:layoutPane id="menu_panel" position="north" resizable="true" closable="false">
                    <ui:insert name="mainMenu">
                        <ui:include src="MenuFrame.xhtml"/>
                    </ui:insert>
                </pe:layoutPane>

                <pe:layoutPane id="content_body" position="center">
                    <ui:insert name="body"/>
                    <ui:insert name="dialogs"/>
                </pe:layoutPane>

                <pe:layoutPane position="south" resizable="false" closable="false">
                    <ui:include src="FooterFrame.xhtml"/>
                </pe:layoutPane>
            </pe:layout>
        </ui:insert>

        <p:growl id="msg_warn" for="arg_msg_for_warn" showDetail="true" sticky="true"/>
        <p:growl id="msg_info" for="arg_msg_for_info" showDetail="true"/>
        <p:growl id="msg_error" showDetail="true" autoUpdate="true" sticky="true" redisplay="false"/>
    </h:body>

</f:view>

</html>

See also: primefaces menu cant fully display out in fullpage layout

Menubar display under panel

2 Answers2