- Problema com submenu Prime Faces 3.5

Front-end
#1
  • Pessoal alguém poderia me ajudar a resolver este problema de visualização como segue ??? Pode ser através de css, jquery, javascript, etc etc etc …

#2

Voce precisa limitar o tamanho da combo pro tamanho do texto.
Poste o codigo que poderei ajuda-lo

#3
  • O problema pelo que percebi está quando tem 1 submenu dentro de outro submenu e por aí vai … Eu até encontrei uma solução no google via css mas o problema é que a propriedade width quando setada via css deixa todos os menus/submenus/menuitens com a mesma largura. Caso eu não encontre uma solução que deixe automática a largura vou ter que usar da forma que consegui mesmo. Aí está o código como solicitado e me perdoa porque não sei como aplicar o recurso de indentação na postagem do código.
		<h:form id="frmMenu" >
		
		    <p:growl id="avisos"/>
		
		    <p:menubar autoDisplay="false"  id="mb" >   
						        
		        <p:submenu label="1.Cadastros" icon="ui-icon-document" rendered="${usuarioLogadoMB.optionsPermitted.get('1.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.ACCESS')}" >
		        
			        <p:submenu style="white-space:nowrap"   label="   1.1 Empresa" icon="ui-icon empresa"  rendered="${usuarioLogadoMB.optionsPermitted.get('1.1.MASTER')   || usuarioLogadoMB.optionsPermitted.get('1.1.ACCESS')}" >
			        
			            <p:menuitem value="   1.1.1 Departamentos" icon="ui-icon deptos" url="deptos.xhtml"         rendered="${usuarioLogadoMB.optionsPermitted.get('1.1.1.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.1.1.ACCESS')}" />
			            <p:menuitem value="   1.1.1 Deptos Avançado" icon="ui-icon deptos" url="deptocolabs.xhtml"         rendered="${usuarioLogadoMB.optionsPermitted.get('1.1.1.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.1.1.ACCESS')}" />
			            <p:menuitem value="   1.1.2 Unidades" icon="ui-icon unidades" url="unidades.xhtml"          rendered="${usuarioLogadoMB.optionsPermitted.get('1.1.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.1.2.ACCESS')}" />
			            <p:menuitem value="   1.1.3 Regiões SAC" icon="ui-icon regioes" url="regiaos.xhtml"         rendered="${usuarioLogadoMB.optionsPermitted.get('1.1.3.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.1.3.ACCESS')}" />
			            <p:menuitem value="   1.1.4 Tipos de Serviços" icon="ui-icon servicos" url="servicos.xhtml" rendered="${usuarioLogadoMB.optionsPermitted.get('1.1.4.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.1.4.ACCESS')}" />
			            
				        <p:submenu url="#"  label="   1.1.6 Cadastros Auxiliares" icon="ui-icon relacs"                              rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.ACCESS')}"    >
				            <p:menuitem  value="   1.1.6.1 Tipos de Rua"       icon="ui-icon grupos_cli" url="gruposclis.xhtml"   rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.1.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.1.ACCESS')}" />
				            <p:menuitem  value="   1.1.6.2 Tipos de Bairro"    icon="ui-icon clientes" url="#"                    rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.2.ACCESS')}" />
				            <p:menuitem  value="   1.1.6.3 Municipios"         icon="ui-icon clientes" url="#"                    rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.2.ACCESS')}" />
				        </p:submenu>
				        
			        </p:submenu>
			        
		            <p:separator rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.ACCESS')}"    />
			        <p:submenu       label="   1.2 Relacionamentos" icon="ui-icon relacs"  rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.ACCESS')}"    >
			        
				        <p:submenu       label="   1.2.1 Cadastros Auxiliares" icon="ui-icon relacs"                              rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.ACCESS')}"    >
				            <p:menuitem  value="   1.2.1.1 Tipos de Rua"       icon="ui-icon grupos_cli" url="gruposclis.xhtml"   rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.1.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.1.ACCESS')}" />
				            <p:menuitem  value="   1.2.1.2 Tipos de Bairro"    icon="ui-icon clientes" url="#"                    rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.2.ACCESS')}" />
				        </p:submenu>
			        
			            <p:menuitem  value="   1.2.2 Grupos de Clientes" icon="ui-icon grupos_cli" url="gruposclis.xhtml"        rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.1.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.1.ACCESS')}" />
			            <p:menuitem  value="   1.2.3 Cadastro de Clientes" icon="ui-icon clientes" url="#"                       rendered="${usuarioLogadoMB.optionsPermitted.get('1.2.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.2.2.ACCESS')}" />
			        </p:submenu>
			        
		            <p:separator rendered="${usuarioLogadoMB.optionsPermitted.get('1.3.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.3.ACCESS')}" />
			        <p:menuitem  value="   1.3 Questionários" icon="ui-icon questoes" url="#"                   rendered="${usuarioLogadoMB.optionsPermitted.get('1.3.MASTER') || usuarioLogadoMB.optionsPermitted.get('1.3.ACCESS')}" />
		            
		        </p:submenu>
		
		        <p:submenu label="2.Relatórios" icon="ui-icon-note" style="white-space:nowrap;padding:0px" rendered="${usuarioLogadoMB.optionsPermitted.get('2.MASTER') || usuarioLogadoMB.optionsPermitted.get('2.ACCESS')}" >
		            <p:menuitem value="2.1 Qualidade" url="#" icon="ui-icon-arrowreturnthick-1-w"  rendered="${usuarioLogadoMB.optionsPermitted.get('2.1.MASTER') || usuarioLogadoMB.optionsPermitted.get('2.1.ACCESS')}" />
		            <p:menuitem value="2.2 Gestão" url="#" icon="ui-icon-arrowreturnthick-1-e"     rendered="${usuarioLogadoMB.optionsPermitted.get('2.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('2.2.ACCESS')}" />
		        </p:submenu>
		
		        <p:submenu label="3.Configurações" icon="ui-icon-wrench"  style="white-space:nowrap;padding:0px" rendered="${usuarioLogadoMB.optionsPermitted.get('3.MASTER') || usuarioLogadoMB.optionsPermitted.get('3.ACCESS')}" >
		            <p:menuitem value="   3.1 Módulos do Sistema" icon="ui-icon modulos" url="modulos.xhtml"      rendered="${usuarioLogadoMB.optionsPermitted.get('3.1.MASTER') || usuarioLogadoMB.optionsPermitted.get('3.1.ACCESS')}" />
		            <p:menuitem value="   3.2 Perfil" icon="ui-icon perfis" url="perfils.xhtml"                   rendered="${usuarioLogadoMB.optionsPermitted.get('3.2.MASTER') || usuarioLogadoMB.optionsPermitted.get('3.2.ACCESS')}" />
		            <p:menuitem value="   3.3 Permissões de Acesso" icon="ui-icon permiss" url="permissaos.xhtml" rendered="${usuarioLogadoMB.optionsPermitted.get('3.3.MASTER') || usuarioLogadoMB.optionsPermitted.get('3.3.ACCESS')}" />
		            <p:separator />
		            <p:menuitem value="   3.4 Usuários" icon="ui-icon users" url="usuarios.xhtml"                 rendered="${usuarioLogadoMB.optionsPermitted.get('3.4.MASTER') || usuarioLogadoMB.optionsPermitted.get('3.4.ACCESS')}"  />
		        </p:submenu>
		
		        <p:menuitem value="4.Sair" action="#{loginMB.efetuaLogout}"  icon="ui-icon-close" rendered="true" />
		
		    </p:menubar>
		
		</h:form> <!-- fim frmMenu -->
#4
  • Pessoal decidi deixar como encontrei na net a solução via css mesmo. Para quem estiver passando pelo mesmo problema que eu, pelo menos esta solução funciona, mas atribuindo o valor da propriedade WIDTH para todos os componentes de menu. Se caso alguém tiver a solução que desejo posta aí depois.

SOLUÇÃO QUE DEVE FICAR DENTRO DE UM ARQUIVO CSS:

.ui-menu .ui-menu-parent  .ui-menu-child {
	white-space:nowrap !important;
	width:290px !important;
}
#5