Menu aparecendo por traz dos componentes primefaces

olá pessoal,

estou desenvolvendo uma aplicação utilizando os componentes visuais primefaces. É um modelo padrão que todo mundo acho que já fez: um menu que ao clicar na opção desejada abre uma tela com um grid que está ligado a uma tabela. Quem programou em Delphi conhece muito bem o estilo. Mas acontece que ao passar o mouse em cima da barra de menu, a lista da opção selecionada está aparecendo atras do componente do primefaces, ou seja, atras do grid.

Basicamente ho html é uma pagina index.html que tem uma div que é carregada dinamicamente de acordo com a opção selecionada.

Código-fonte do carregamento da opção desejada:

li class='has-sub '>Empresas

  • Clientes

    Como falei anteriormente, a função abrirPag(), abre o jsf na

    Alguém tem alguma ídeia do que possa estar acontecendo?

    Gustavo Freitas

  • Falae,

    Quando aconteceu isso comigo eu alterei o css da minha app:
    .ui-layout-north {
    z-index: 3!important;
    overflow: visible!important;
    }
    .ui-layout-north .ui-layout-unit-content {
    overflow: visible!important;
    }

    .ui-menu,.ui-menubar,.ui-menu-child {
    min-width: 180px!important;
    }

    Espero que te ajude,
    Marques

    Olá amigo, não funcionou. Estou usando os themes, retirei do web.xml.

    Tenho um arquivo chamado geral.css, que carrego logo no início:

    Coloquei o que vc fez nesse arquivo mas não funcionou. O menu que estou usando não é do primefaces, será esse o problema? Porque o css desse menu é outro.

    Gustavo Freitas

    Eu uso algo parecido, talvez te ajude.
    Mas não usa ajax para mudar de tela.

    Template

    <?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:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <ui:include src="../WEB-INF/component/header.xhtml"/><!--aqui estou incluindo um xhtml que tem meus estilos personalizados e eventuais js's--> </h:head> <h:body> <p:layout fullPage="true"> <p:layoutUnit position="north" size="50"> <ui:include src="../WEB-INF/component/menu.xhtml"/><!--aqui estou incluindo um xhtml com o menu no seu caso já deve ter isso pronto--> </p:layoutUnit> <p:layoutUnit position="center"> <ui:insert name="content">Content</ui:insert> </p:layoutUnit> </p:layout> <ui:insert name="out">Out</ui:insert> <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/> <p:dialog modal="true" widgetVar="statusDialog" header="Aguarde...." draggable="false" closable="false"> <p:graphicImage library="images" name="ajaxloadingbar.gif" alt="Aguarde...."/> </p:dialog> </h:body> </html>

    Um exemplo de cliente do template

    <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" template="../../template/report.xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"> <ui:define name="content"> <!--aqui vai o conteudo da sua pagina--> </ui:define> <ui:define name="out"> <!--aqui vai todos os dialogs pois o p:layout impacta na exibição dos dialig's--> </ui:define> </ui:composition>

    E o trecho do css para o menu sobrepor o restante da tela

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

    Espero ter ajudado.

    Voce esta usando tags html ao inves de usar as tags do primefaces, e provavelmente dentro de um arquivo .html, verifique, pois o JSF roda por padrão em arquivos .XHTML

    TAGS HTML

    li class='has-sub '><a href='#' onclick="abrirPag('cadastros/companyList.jsf');">Empresas</a> 
    <li class='has-sub '><a href='#' onclick="abrirPag('cadastros/clientList.jsf');">Clientes</a> 

    TAGS Primefaces

    <p:menubar>
        <p:submenu>
            <p:menuitem value="Empresa" />
        </p:submenu>
    </p:menubar>

    [quote=rof20004][quote]
    Alguém tem alguma ídeia do que possa estar acontecendo?
    [/quote]

    Voce esta usando tags html ao inves de usar as tags do primefaces, e provavelmente dentro de um arquivo .html, verifique, pois o JSF roda por padrão em arquivos .XHTML

    TAGS HTML

    li class='has-sub '><a href='#' onclick="abrirPag('cadastros/companyList.jsf');">Empresas</a> 
    <li class='has-sub '><a href='#' onclick="abrirPag('cadastros/clientList.jsf');">Clientes</a> 

    TAGS Primefaces

    <p:menubar> <p:submenu> <p:menuitem value="Empresa" /> </p:submenu> </p:menubar> [/quote]

    Concordo, utilize o menu do Prime, é a melhor solução.

    Bom dia Amauri,

    está me ajudando bastante, lhe agradeço muito. Então resolvi seguir seus passos e resolvi fazer um pequeno teste aqui. mas na hora de rodar que nao aparece nada, a tela fica em branco. Nao consegui ver onde está o erro, pode me dar uma ajuda?

    Abaixo segue os fontes,

    Criei um menu2.html, o principal:

    <?xml version='1.0' encoding='UTF-8' ?>

    E os menu.xhtml e header.xhtml, o menu peguei do próprio site da primefaces, e está funcionando perfeitamente.

    MENU.XHTML

    <h:head>
    </h:head>

    <h:body>
    <h:form>

    <p:growl id="messages"/>  
    
    <h3>Default Menubar</h3>  
    <p:menubar>  
        <p:submenu label="File" icon="ui-icon-document">  
            <p:submenu label="New" icon="ui-icon-contact">  
                <p:menuitem value="Project" url="#" />  
                <p:menuitem value="Other" url="#" />  
            </p:submenu>  
            <p:menuitem value="Open" url="#" />  
            <p:separator />  
            <p:menuitem value="Quit" url="#" />  
        </p:submenu>  
    
        <p:submenu label="Edit" icon="ui-icon-pencil">  
            <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" />  
            <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" />  
        </p:submenu>  
    
        <p:submenu label="Help" icon="ui-icon-help">  
            <p:menuitem value="Contents" url="#" />  
            <p:submenu label="Search" icon="ui-icon-search">  
                <p:submenu label="Text">  
                    <p:menuitem value="Workspace" url="#" />  
                </p:submenu>  
                <p:menuitem value="File" url="#" />  
            </p:submenu>  
        </p:submenu>  
    
        <p:submenu label="Actions" icon="ui-icon-gear">  
            <p:submenu label="Ajax" icon="ui-icon-refresh">  
                <p:menuitem value="Save" actionListener="#{menuBean.save}" icon="ui-icon-disk" update="messages"/>  
                <p:menuitem value="Update" actionListener="#{menuBean.update}" icon="ui-icon-arrowrefresh-1-w" update="messages"/>  
            </p:submenu>  
            <p:submenu label="Non-Ajax" icon="ui-icon-newwin">  
                <p:menuitem value="Delete" actionListener="#{menuBean.delete}" icon="ui-icon-close" update="messages" ajax="false"/>  
            </p:submenu>  
        </p:submenu>  
    
        <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" />  
    
        <f:facet name="options">  
            <p:inputText style="margin-right:10px"/>  
            <p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />  
        </f:facet>  
    </p:menubar>  
    
    <h3>Click Trigger</h3>  
    <p:menubar autoDisplay="false">  
        //same content as default menubar  
    </p:menubar>  
    

    </h:form>

    </h:body>

    HEADER.XHTML

    BIT Auto-peças body {background:url('./defaultTheme/img/bg_bluewhite2.png') repeat-x;}

    Crie o menu2.xhtml ao inves de html.

    Isso aqui que voce declara

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

    nao funciona em .html, e outra coisa, tudo que for do primefaces, tem que ta no minimo dentro de <h:body> e nao de

    Sim, ja fiz de tudo

    Olha a mina tela como ficou, a imagem está no anexo. Viu como o menu fica entrelaçado no DataTable?

    Gustavo Freitas


    Mostra o codigo completo dessa sua pagina por favor.

    Ahhhh, dentro das tags code ok ? =D

    Segue em anexo os fontes

    Lhe mandei o indexhtml antigo, segue no anexo o novo

    E o codigo onde ta o datatable, tem como mandar tb ?

    Olha ele aí, é bem simples só tem a imagem por enquanto

    Segue a imagem de fundo

    Faz um teste, substitui todo seu index.html, por esse conteudo ai, e OUTRA, mude a extensao dele para .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:p="http://primefaces.org/ui">
    
    <h:head>
    	<meta charset="UTF-8">
    	<title>BIT Auto-peças</title>	
    	<link rel="stylesheet" type="text/css" href="./defaultTheme/css/geral.css"/>
    	<link rel="stylesheet" type="text/css" href="./defaultTheme/css/menuheader.css"/>	
    	<script type="text/javascript" src="./js/ajax.js"></script>
    	<script type="text/javascript" src="./js/instrucao.js"></script>
    	<style type="text/css">
    		body {background:url('./defaultTheme/img/bg_bluewhite2.png') repeat-x;}
    	</style>      
    </h:head>
    
    <h:body>
    	<div id="pagina">
    		<div id="conteudo_menu">
    		
      		<div class="menusup" id="menusup">
     				<nav id="menu-support">
    					<ul>
    						<li> <a href="#">HELP</a> </li>
    						<li> <a href="#">SUPORTE</a> </li>
    						<li> <a href="#">CONTATO</a> </li>
    						<li> <a href="#">LOGIN</a> </li>
    						<li> <a href="#">SAIR</a> </li>
    					</ul>
    				</nav>
    			</div>
    		
    	  	<ul id='menu-bar'>
         	  <li class='home'><a href='index.html'>Home</a></li>
         		<li class='has-sub '><a href='#'>Cadastros</a>
            	<ul>
            		<li class='has-sub '><a href='#' onclick="abrirPag('cadastros/companyList.jsf');">Empresas</a>
            		<li class='has-sub '><a href='#' onclick="abrirPag('cadastros/clientList.jsf');">Clientes</a>
            		<li class='has-sub '><a href='#'>Produtos</a>
              	  <ul>
                	  <li><a href='#'>Produtos</a></li>
                    <li><a href='#'>Fabricantes</a></li>
                    <li><a href='#'>Modelos</a></li>
                    <li><a href='#'>Grupos e subgrupos</a></li>
                    <li><a href='#'>Tipos de movimento</a></li>
                    <li><a href='#'>Localidade dos produtos</a></li>
               	  </ul>
               	</li>
              
                <li class='has-sub '><a href='#'>Finanças</a>
                  <ul>
                    <li><a href='#'>Bancos</a></li>
                    <li><a href='#'>Contas bancárias</a></li>
                    <li><a href='#'>Espécie</a></li>
                    <li><a href='#'>Tipos de contrato</a></li>
                    <li><a href='#'>Plano de contas</a></li>
                    <li><a href='#'>Alíquotas ICMS</a></li>
                  </ul>
                </li>
               
                <li class='has-sub '><a href='#'>Recursos humanos</a>
                  <ul>
                     <li><a href='#'>Funcionários</a></li>
                     <li><a href='#'>Cargos</a></li>
                     <li><a href='#'>Centro de custos/departamentos</a></li>
                  </ul>
                </li>
               
                <li class='has-sub '><a href='#'>Outros</a>
     					    <ul>
     					      <li class='has-sub'><a href='#'>Grupos de clientes</a>
                    <li class='has-sub'><a href='#'>Tipos de serviços/mão-de-obra</a></li>
            			  <li class='has-sub'><a href='#'>Tipos de documento</a></li>
            			  <li class='has-sub'><a href='#'>Tipos de contato</a></li>
            			  <li class='has-sub'><a href='#'>Localidades</a></li>
            			  <li class='has-sub'><a href='#'>Terminais PDV</a></li>
            		  </ul>
                </li>
              </ul>
          	</li>
        		<li class='has-sub' ><a href='#'>Estoque</a>
        			<ul>
                <li class='has-sub'><a href=' #'>Nota fiscal de fornecedor</a></li>
               	<li class='has-sub'><a href=' #'>Movimento de estoque</a></li>
                <li class='has-sub'><a href=' #'>Importar nota fiscal do fornecedor</a></li>
                <li class='has-sub'><a href=' #'>Transferência de estoque</a></li>
                <li class='has-sub'><a href=' #'>Posição de estoque</a></li>
                <li class='has-sub'><a href=' #'>Guia de compra</a></li>
                <li class='has-sub'><a href=' #'>Pedido de compra</a></li>
                <li class='has-sub'><a href=' #'>Cotação de produtos</a></li>
                <li class='has-sub'><a href=' #'>Cálculo do custo médio</a></li>
                <li class='has-sub'><a href=' #'>Reajuste de preços</a></li>
                <li class='has-sub'><a href=' #'>Tabela de preços</a></li>
        			</ul>
        		</li>
        		<li class='has-sub'><a href='#'>Faturamento</a>
        			 <ul>
           			  <li class='has-sub'><a href='#'>Pedido de vendas</a></li>
                  <li class='has-sub'><a href='#'>Emissão de nota fiscal</a></li>
                  <li class='has-sub'><a href='#'>Devolução de produtos</a></li>
                  <li class='has-sub'><a href='#'>Tabela de preços</a></li>
                  <li class='has-sub'><a href='#'>Orçamentos</a></li>
                  <li class='has-sub'><a href='#'>Ordem de serviços</a></li>
                  <li class='has-sub'><a href='#'>Abertura</a></li>
                  <li class='has-sub'><a href='#'>Comissões e fechamento do caixa</a></li>
          	      <li class='has-sub'><a href='#'>Análise de vendas</a></li>
       	          <li class='has-sub'><a href='#'>Movimentação dos terminais</a></li>
        	        <li class='has-sub'><a href='#'>Movimentação de produtos</a></li>
       	      	</ul>
       	     </li>
    				<li><a href='#'>Finanças</a>
       		 		<ul>
       	       	 <li><a href='#'>Nova conta</a></li>
       	         <li><a href='#'>Lista de contas</a></li>
       	         <li><a href='#'>Receitas e despesas</a></li>
       	         <li><a href='#'>Contas a receber</a></li>
       	         <li><a href='#'>Contas a pagar</a></li>
       	         <li><a href='#'>Contas pagas e recebidas</a></li>
       	         <li><a href='#'>Transferências entre contas</a></li>
       	         <li><a href='#'>Programar transferências</a></li>
       	         <li><a href='#'>Criar orçamento</a></li>
      	        </ul>
    	        </li>
    			</ul>
    		</div>
    		
    		<div id="grpDetalhe">
    		</div>
    		
    	</div>
    </h:body>
    </html>

    Nada, ficou a mesma coisa, acho que isso de bugaço do proprio primefaces.

    Temos que apelar para o Chuck Norris!!

    Vamo na doida, depois dessa doida vo da um tempo que vo almoçar, mas tarde to ae, pra nos bater cabeça, negocio ae ta esquisito, parece ate erro de CSS mesmo.

    Faz assim, tira esse background.

    <style type="text/css">  
            body {background:url('./defaultTheme/img/bg_bluewhite2.png') repeat-x;}  
        </style>