Prime Community Forum

Posted: **22 Jun 2016, 21:07**

hi all...
i'm using netbeans 8.1, PrimeFaces 6.0, JSF 2.2 and Payara Server 4.1.1

i have a problem with a menuBar in a layoutUnit...
it is like that layoutUnit has a fixed size...

template.xhtml

Code: Select all

...
    <h:head>
        <title><ui:insert name="title">Default Title</ui:insert></title>
        <h:outputStylesheet library="css" name="users.css"/>
        <h:outputScript library="scripts" name="pfcrud.js"/>
    </h:head>

    <h:body>

        <p:growl id="growl" autoUpdate="true" life="5000"/>

        <p:layout fullPage="true">
            <p:layoutUnit position="north" header="#{myBundle.AppName}">
                <!-- Menu here. Also a layout and a way to log a user out -->
                <ui:include src="/Desktop/Include/appmenu.xhtml"/>
            </p:layoutUnit>
...

appmenu.xml

Code: Select all

...
        <h:form id="menuForm">
            <p:menubar>
                <p:menuitem value="#{myBundle.Home}" outcome="/index" icon="ui-icon-home"/>
                <p:submenu label="#{myBundle.Maintenance}">
                    <p:menuitem value="#{myBundle.BrandHeading}" outcome="/Desktop/PrimeFacesPages/brand/index" />
                    <p:menuitem value="#{myBundle.CommentHeading}" outcome="/Desktop/PrimeFacesPages/comment/index" />
                    <p:menuitem value="#{myBundle.FeatureHeading}" outcome="/Desktop/PrimeFacesPages/feature/index" />
                    <p:menuitem value="#{myBundle.FeatureTypeHeading}" outcome="/Desktop/PrimeFacesPages/featureType/index" />
                </p:submenu>
                <p:menuitem value="#{myBundle.Mobile}" outcome="/Mobile/PrimeFacesPages/index" icon="ui-icon-signal"/>
                <p:menuitem value="User View" outcome="/Desktop/Users/index" icon="ui-icon-carat-1-ne"/>
            </p:menubar>
        </h:form>
...

users.css

Code: Select all

.ui-growl{
    right: 50%;
    top: 50%;
}

i tried with firefox, edge, chrome.
sorry if the question is stupid but idk why it stopped work fine...

can someone help me please?

Posted: **23 Jun 2016, 16:42**

Can you try this code ?

Code: Select all

<p:layout>
                <p:layoutUnit position="north">
                    <ui:include src="/menu.xhtml"/>
                </p:layoutUnit>
                 <p:layoutUnit position="center">
                     <p:outputLabel value="Center Content"></p:outputLabel>
                </p:layoutUnit>
            </p:layout>

Code: Select all

<h:form id="menuForm">
            <p:menubar>
                <p:menuitem value="Home" outcome="/index" icon="ui-icon-home"/>
                <p:submenu label="Submenu">
                    <p:menuitem value="1"  outcome="/index"/>
                    <p:menuitem value="2" outcome="/index" />
                    <p:menuitem value="3" outcome="/index" />
                    <p:menuitem value="4" outcome="/index" />
                </p:submenu>
                <p:menuitem value="Mobile" outcome="/index" icon="ui-icon-signal"/>
                <p:menuitem value="User View" icon="ui-icon-carat-1-ne"/>
            </p:menubar>
        </h:form>

Posted: **24 Jun 2016, 10:30**

hsntpn wrote:Can you try this code ?

Code: Select all

<p:layout>
                <p:layoutUnit position="north">
                    <ui:include src="/menu.xhtml"/>
                </p:layoutUnit>
                 <p:layoutUnit position="center">
                     <p:outputLabel value="Center Content"></p:outputLabel>
                </p:layoutUnit>
            </p:layout>

Code: Select all

<h:form id="menuForm">
            <p:menubar>
                <p:menuitem value="Home" outcome="/index" icon="ui-icon-home"/>
                <p:submenu label="Submenu">
                    <p:menuitem value="1"  outcome="/index"/>
                    <p:menuitem value="2" outcome="/index" />
                    <p:menuitem value="3" outcome="/index" />
                    <p:menuitem value="4" outcome="/index" />
                </p:submenu>
                <p:menuitem value="Mobile" outcome="/index" icon="ui-icon-signal"/>
                <p:menuitem value="User View" icon="ui-icon-carat-1-ne"/>
            </p:menubar>
        </h:form>

this is exactly what i wrote... but i tried with your code, same problem

Posted: **24 Jun 2016, 13:48**

Layout units north and south in full page mode have fixed heights and 100% widths. You need to set the height you require.

Posted: **24 Jun 2016, 16:06**

We have the same issue. We override PF styles by using

Code: Select all

.ui-layout-north  {
	z-index: 20 !important;
	overflow: visible !important;
}

Posted: **25 Jun 2016, 09:23**

ccarballo wrote:We have the same issue. We override PF styles by using
Code: Select all
.ui-layout-north  {
	z-index: 20 !important;
	overflow: visible !important;
}

this code works fine! thank you!

Prime Community Forum

menu not showed correctly

menu not showed correctly

Re: menu not showed correctly

Re: menu not showed correctly

Re: menu not showed correctly

Re: menu not showed correctly

Re: menu not showed correctly