Menu aparecendo por traz dos componentes primefaces

12 de fevereiro de 2013 22 respostas

GustavoFreitas 12 de fevereiro de 2013

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

22 Respostas

Marques 12 de fev. de 2013

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

GustavoFreitas 13 de fev. de 2013

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

AmauriSpPoa 14 de fev. de 2013

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"/> </h:head> <h:body> <p:layout fullPage="true"> <p:layoutUnit position="north" size="50"> <ui:include src="../WEB-INF/component/menu.xhtml"/> </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">  </ui:define> <ui:define name="out">  </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.

rof20004 14 de fev. de 2013

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>

AmauriSpPoa 14 de fev. de 2013

rof20004:

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

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>

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

GustavoFreitas 14 de fev. de 2013

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

rof20004 14 de fev. de 2013

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

GustavoFreitas 14 de fev. de 2013

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

rof20004 14 de fev. de 2013

Mostra o codigo completo dessa sua pagina por favor.

rof20004 14 de fev. de 2013

Ahhhh, dentro das tags code ok ? =D

GustavoFreitas 14 de fev. de 2013

Segue em anexo os fontes

GustavoFreitas 14 de fev. de 2013

Lhe mandei o indexhtml antigo, segue no anexo o novo

rof20004 14 de fev. de 2013

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

GustavoFreitas 14 de fev. de 2013

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

GustavoFreitas 14 de fev. de 2013

Segue a imagem de fundo

rof20004 14 de fev. de 2013

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>

GustavoFreitas 14 de fev. de 2013

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

rof20004 14 de fev. de 2013

Temos que apelar para o Chuck Norris!!

rof20004 14 de fev. de 2013

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>

rof20004 14 de fev. de 2013

Pode apagar o style todo mesmo, e testa, outra coisa, apague o Cache do seu browser tb.

shirleyvale 30 de ago. de 2013

Alterei CSS conforme sugerido no início da discussao e funcionou pra mim.

.ui-layout-north {

z-index: 20!important;

overflow: visible!important;

}

.ui-layout-north .ui-layout-unit-content {

overflow: visible!important;

}

Thanks.

felipeti 28 de mai. de 2014

Bom dia,
Você tem este exemplo para me enviar?, estou começando agora com primefaces e achei o seu projeto interessante para criar o meu, teria como?

Obrigado

Criado 12 de fevereiro de 2013

Ultima resposta 28 de mai. de 2014

Respostas 22

Participantes 6

22 Respostas

Topicos relacionados