Problem with menu and toolbar

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
smlarraga
Posts: 1
Joined: 14 Oct 2012, 17:59

16 Dec 2017, 03:03

Hi everyone

I saw the next in u page.

Image

But in my proyect, the result it the next.

the toolbar and menu is over the content .
Image

The menu expands where i click it (in dad item only)
Image


in the responsive preview is not affected,it is shows normal


My toobar

Code: Select all

            
        <a href="#" class="profile">
            <span class="username">Sarah Miller</span>
            <p:graphicImage name="images/avatar.png" library="apollo-layout" />
            <i class="fa fa-angle-down"></i>
        </a>
        
        <span class="topbar-search">
            <input type="text" placeholder="Search"/>
            <span class="fa fa-search"></span>
        </span>
        
        <span class="topbar-themeswitcher">
           
        </span>

        <ul class="topbar-menu fadeInDown">
            <li>
                <a href="#">
                    <i class="topbar-icon fa fa-fw fa-user"></i>
                    <span class="topbar-item-name">Profile</span>
                </a>
                <ul>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-user"></i>
                            <span>Profile</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-user-secret"></i>
                            <span>Privacy</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-cog"></i>
                            <span>Settings</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-sign-out"></i>
                            <span>Logout</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="topbar-icon fa fa-fw fa-cog"></i>
                    <span class="topbar-item-name">Settings</span>
                </a>
                <ul>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-paint-brush"></i>
                            <span>Change Theme</span>
                            <span class="topbar-badge">1</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-star-o"></i>
                            <span>Favorites</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-lock"></i>
                            <span>Lock Screen</span>
                            <span class="topbar-badge">3</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-picture-o"></i>
                            <span>Wallpaper</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="topbar-icon fa fa-fw fa-envelope-o"></i>
                    <span class="topbar-item-name">Messages</span>
                    <span class="topbar-badge">5</span>
                </a>
                <ul>
                    <li role="menuitem">
                        <a href="#" class="topbar-message">
                            <p:graphicImage name="images/avatar1.png" library="apollo-layout" width="35"/>
                            <span>Give me a call</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#" class="topbar-message">
                            <p:graphicImage name="images/avatar2.png" library="apollo-layout" width="35"/>
                            <span>Reports attached</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#" class="topbar-message">
                            <p:graphicImage name="images/avatar3.png" library="apollo-layout" width="35"/>
                            <span>About your invoice</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#" class="topbar-message">
                            <p:graphicImage name="images/avatar2.png" library="apollo-layout" width="35"/>
                            <span>Meeting today</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#" class="topbar-message">
                            <p:graphicImage name="images/avatar4.png" library="apollo-layout" width="35"/>
                            <span>Out of office</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="topbar-icon fa fa-fw fa-bell-o"></i>
                    <span class="topbar-item-name">Notifications</span>
                    <span class="topbar-badge">2</span>
                </a>
                <ul>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-tasks"></i>
                            <span>Pending tasks</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-calendar-check-o"></i>
                            <span>Meeting today</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-download"></i>
                            <span>Download</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a href="#">
                            <i class="fa fa-fw fa-plane"></i>
                            <span>Book flight</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="topbar-search-item">
                <span class="topbar-search">
                    <input type="text" placeholder="Search"/>
                    <span class="fa fa-search"></span>
                </span>
            </li>
        </ul>
    </div>

</ui:composition>
My menu

Code: Select all

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

    <div class="layout-menu-container">
        <div class="nano">
            <div class="nano-content menu-scroll-content">
           
                <div class="layout-menu-title">MENU</div>
                <h:form id="menuform">
                    <pa:menu>
                        <p:menuitem id="apl_dashboard" value="Dashboard" icon="fa fa-dashboard" outcome="/dashboard"/>
                        <p:submenu id="apl_default" label="Jsf" icon="fa fa-life-saver">
                            <p:menuitem id="apl_empty" value="Chequeo" icon="fa fa-square-o"  outcome="/jsf/chequeo/listChequeos"/>
                            <p:menuitem id="apl_landing" value="Consulta" icon="fa fa-certificate" outcome="/jsf/consulta/listConsultas"/>
                            <p:menuitem id="apl_login" value="Modulo Atencion" icon="fa fa-sign-in"   outcome="/jsf/modatencion/listModAtencions"/>
                            <p:menuitem id="apl_error" value="PsRole" icon="fa fa-exclamation-circle"  outcome="/jsf/psrole/listPsroles"/>
                            <p:menuitem id="apl_404" value="PsroleUser" icon="fa fa-times"   outcome="/jsf/psroleuser/listPsroleusers"/>
                            <p:menuitem id="apl_access" value="Psuser" icon="fa fa-exclamation-triangle" outcome="/jsf/psuser/listPsusers"/>
                        </p:submenu>
                        <p:submenu id="apl_hierarchy" label="Hierarchy" icon="fa fa-gg">
                            <p:submenu id="apl_sm1" label="Submenu 1" icon="fa fa-sign-in">
                                <p:submenu id="apl_sm11" label="Submenu 1.1" icon="fa fa-sign-in">
                                    <p:menuitem id="apl_lnk111" value="Link 1.1.1" icon="fa fa-sign-in" url="#" />
                                    <p:menuitem id="apl_lnk112" value="Link 1.1.2" icon="fa fa-sign-in" url="#" />
                                    <p:menuitem id="apl_lnk113" value="Link 1.1.3" icon="fa fa-sign-in" url="#" />
                                </p:submenu>
                                <p:submenu id="apl_sm12" label="Submenu 1.2" icon="fa fa-sign-in">
                                    <p:menuitem id="apl_lnk121" value="Link 1.2.1" icon="fa fa-sign-in" url="#" />
                                </p:submenu>
                            </p:submenu>
                            <p:submenu id="apl_sm2" label="Submenu 2" icon="fa fa-sign-in">
                                <p:submenu id="apl_sm21" label="Submenu 2.1" icon="fa fa-sign-in">
                                    <p:menuitem id="apl_lnk211" value="Link 2.1.1" icon="fa fa-sign-in" url="#" />
                                    <p:menuitem id="apl_lnk212" value="Link 2.1.2" icon="fa fa-sign-in" url="#" />
                                </p:submenu>
                                <p:submenu id="apl_sm22" label="Submenu 2.2" icon="fa fa-sign-in">
                                    <p:menuitem id="apl_lnk221" value="Link 2.2.1" icon="fa fa-sign-in" url="#" />
                                </p:submenu>
                            </p:submenu>
                        </p:submenu>

                        <p:menuitem id="apl_doc" value="Docs" icon="fa fa-book"  />
                        <p:menuitem id="apl_buy" value="Buy" icon="fa fa-credit-card" url="https://www.primefaces.org/store"/>
                    </pa:menu>


                </h:form>
                
                <div class="nano-scroll-footer" />
                
            </div>
            </div>
    </div>


</ui:composition>
My template

Code: Select all

<!DOCTYPE html>
<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">

<h:head>
	<f:facet name="first">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
	</f:facet>
	<title><ui:insert name="title">PrimeFaces Apollo</ui:insert></title>
	<h:outputScript name="js/nanoscroller.js" library="apollo-layout" />
	<h:outputScript name="js/layout.js" library="apollo-layout" />
	<h:outputStylesheet name="css/nanoscroller.css" library="apollo-layout" />
	<h:outputStylesheet name="css/layout-green-light.css"
		library="apollo-layout" />
	
</h:head>

<h:body>
<div class="layout-wrapper layout-green-light.css">
		<ui:include src="topbar.xhtml" />
		<div class="layout-wrapper layout-wrapper layout-horizontal">

			<ui:include src="menu.xhtml" />
		</div>

		<div class="layout-content">
                <div class="layout-breadcrumb">
                    <ul>
                        <li><p:link outcome="/dashboard"><i class="fa fa-home" /></p:link></li>
                        <li>/</li>
                        <ui:insert name="breadcrumb" />
                    </ul>
                    
                    <div class="layout-breadcrumb-options">
                        <a href="#" title="Backup">
                            <i class="fa fa-cloud-upload"></i>
                        </a><a href="#" title="Bookmark">
                            <i class="fa fa-bookmark"></i>
                        </a><a href="#" title="Logout">
                            <i class="fa fa-sign-out"></i>
                        </a>
                    </div>
                </div>
                
                <div class="layout-content-container">
                    <ui:insert name="content"/>
                </div>
            </div>
            
            <ui:include src="footer.xhtml" />
            
            <div class="layout-mask"></div>
            </div>

</h:body>

</html>
thanks :D

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Dec 2017, 09:08

Which version are you using? Also, please check your template.xhtml. I saw some mistakes on your template page

Post Reply

Return to “Apollo - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests