menu not showed correctly

UI Components for JSF
Post Reply
belmar
Posts: 14
Joined: 16 May 2016, 09:54

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

Image

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?
using netbeans 8.1, PrimeFaces 6.0, JSF 2.2 and Payara Server 4.1.1

hsntpn
Posts: 15
Joined: 18 Mar 2016, 21:24

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>

belmar
Posts: 14
Joined: 16 May 2016, 09:54

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
using netbeans 8.1, PrimeFaces 6.0, JSF 2.2 and Payara Server 4.1.1

User avatar
andyba
Expert Member
Posts: 2473
Joined: 31 Mar 2011, 16:27
Location: Steinfeld, near Bremen/Osnabrück, DE
Contact:

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.
PF 4.x (Elite versions), PF 5, Pf 5.1, PF 6.0
Glassfish 4.1, Mojarra 2.x, Java 8, Payara 4.1.1.
If you haven't read the forum rules read them now

ccarballo
Posts: 3
Joined: 19 Mar 2013, 01:56

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

belmar
Posts: 14
Joined: 16 May 2016, 09:54

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!
using netbeans 8.1, PrimeFaces 6.0, JSF 2.2 and Payara Server 4.1.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 23 guests