Scrolls no p:layout

Front-end
#1

Olá, pessoal!

Estou trabalhando há pouco tempo com Primefaces e iniciando uma aplicação onde utilizo o p:layout fullpage=“true” onde, no layoutUnit north tenho um menuBar.

O que acontece é que os itens de menus são cortados ao abrir um menu e também tem uma barra de rolagem que não consigo desativar. Segue imagem de como está apresentando o menu:

Tentei resolver através de css, mas não obtive sucesso. Veja como está o código do layout:

// layout.xhtml
<h:body>
    <p:layout fullPage="true">
		<p:layoutUnit id="topo" position="north" size="50">
			
			<table class="topo" width="100%" cellpadding="0" cellspacing="0">
				<tr>
					<td align="left" width="20%">
						<h:graphicImage id="logomarca" value="/images/logo-pequeno.png" height="35" />
					</td>
					
					<td align="left" width="70%">
						
						<h:form id="frmMenuPrograma">
					        <p:menubar id="menu" autoDisplay="false" style="border:none;">
								<p:submenu label="Arquivo" icon="ui-icon-note">
									<p:menuitem value="Build" icon="ui-icon-flag" url="/view/build/index.jsf" />
									<p:menuitem value="Consulta" icon="ui-icon-person" url="/view/consulta/index.jsf" />
									<p:menuitem value="Objetos" icon="ui-icon-key" url="/view/objeto/index.jsf" />
								</p:submenu>
								
								<p:menuitem value="Sair" icon="ui-icon-close" immediate="true" url="#{openidConfiguration.logoutURL}" ajax="false" /> 
							</p:menubar>
						</h:form>
						
					</td>
					
					<td align="right" width="10%"> 
						<h:outputLabel value="#{request.userPrincipal}"/>
					</td>
				</tr>
			</table>
						
		</p:layoutUnit>
			
		
		<p:layoutUnit id="conteudo" position="center" size="30">
			conteúdo aqui...
			<h:form id="form_msg"> 
		        <p:growl id="messages"/>
	        </h:form>
		
        	<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
			
			<p:dialog modal="false" appendToBody="true" widgetVar="statusDialog" showHeader="true" header="Processando..." 
			        draggable="false" closable="false" resizable="false" styleClass="align-center">  
			    <h:graphicImage value="/images/ajax-loader.gif" width="32" height="32" />
			</p:dialog>
			
			<ui:insert name="content" />
		
		</p:layoutUnit>
		
		
		<p:layoutUnit id="rodape" position="south" size="20">
			<a href="http://www.maxiconsystems.com.br" target="_blank">Maxicon Sistemas LTDA.</a>
			&copy; 2012 Todos os direitos reservados. WebMaxysBuild v2.0
		&lt;/p:layoutUnit&gt;
		
    &lt;/p:layout&gt;
&lt;/h:body&gt;

e o css:

#topo {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: #459add 1px solid;
	position: static;
	float: left;
	clear: both;
	z-index: 1000;
	overflow: hidden;
}

	#logomarca {
		vertical-align: middle;
		margin-left: 20px;
	}

	#menu {
		position: fixed;
		float: left;
		clear: both;
		z-index: 1001;
		overflow: hidden;
	}

	#frmMenuPrograma {
		min-height: 30px;
		width: 200px;
	}

Vi que teve outras pessoas perguntando algo semelhante aqui no fórum, mas as dicas que deram não me ajudaram. Também olhei na documentação do Primefaces, Alguém sabe como resolver isso?

Agradeço por qualquer dica útil.

#2

Consegui resolver! Bastou corrigir meu CSS e adicionar algumas classes da api do prime.

Segue o código para quem precisar :smiley: .

.ui-layout-north {
    z-index: 30 !important;
    overflow: visible !important;
}

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

#topo {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: #459add 1px solid;
	clear: both;
	padding: 0;
}
#3

Faleu Fera! Estava louco atrás dessa solução!! :smiley:

#4