Question :
Good colleagues, I’m having a problem with the MegaMenu component of primefaces I liked the components to be visible to the users but they are hidden behind the central region, so I would like to bring it forward. How can I do that? I tried to use an external css and call more unfortunately it did not work so I decided to use inline css also did not resolve. Below images
MenuCode
<?xmlversion="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
xmlns_h="http://java.sun.com/jsf/html"
xmlns_f="http://java.sun.com/jsf/core"
xmlns_p="http://primefaces.org/ui"
xmlns_ui="http://java.sun.com/jsf/facelets">
<h:form>
<h3
style="font-size: 1.3em; margin: 0; margin-left: 2%; font-weight: 1.5; padding: 5px;"
align="center">Administrador</h3>
<p:menu style="border:none; width:95%;">
<p:menuitem icon="ui-icon-check" value="Estoque de produtos"
outcome="/pages/productos.xhtml" />
<p:menuitem icon="ui-icon-person" value="Funcionários"
outcome="/pages/funcionarios.xhtml" />
<p:menuitem icon="ui-icon-tag" value="Departamentos"
outcome="/pages/departamentos.xhtml" />
</p:menu>
<p:megaMenu orientation="#{MBIncludesBean.orientation}"
style="border:none;">
<p:submenu label=" Consultar ações">
<p:column>
<p:submenu label="Consultar Historiais">
<p:menuitem value="Historial de entradas"
outcome="/pages/entradaProductos.xhtml" />
<p:menuitem value="Historial de saídas"
outcome="/pages/saidaProductos.xhtml" />
<p:menuitem value="Historial de requisições"
outcome="/pages/requisicoes.xhtml" />
<p:menuitem value="Historial de produtos"
outcome="/pages/historialProducto.xhtml" />
<p:menuitem value="Historial de departamentos"
outcome="/pages/historialDepartamento.xhtml" />
<p:menuitem value="Historial de funcionários"
outcome="/pages/historialFuncionario.xhtml" />
</p:submenu>
</p:column>
</p:submenu>
</p:megaMenu>
</h:form>
</ui:composition>
CSS code
@charset "ISO-8859-1";
.ui-layout-west {
z-index: 20 !important;
overflow: visible !important;;
}
.ui-widget, .ui-widget .ui-widget {
font-size: 95% !important;
}
.ui-layout-west .ui-layout-unit-content {
overflow: visible !important;
}
Layout code
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns_h="http://java.sun.com/jsf/html"
xmlns_f="http://java.sun.com/jsf/core"
xmlns_p="http://primefaces.org/ui"
xmlns_ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title><ui:insert name="namePage">Layout do sistema</ui:insert></title>
<h:outputStylesheet library="css" name="style.css"/>
</h:head>
<h:body style="background: #f2f1f1;">
<p:growl id="msg" life="6000" />
<p:layout fullPage="true" style="border:none;">
<p:layoutUnit position="west" size="245" style="border:none;" >
<ui:insert name="menu" />
</p:layoutUnit>
<p:layoutUnit size="60" position="north" style="border:none; overflow:visible;">
<ui:insert name="cabecalho" />
</p:layoutUnit>
<p:layoutUnit position="center" style="border:none; ">
<ui:insert name="conteudo" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Answer :
Ayrton as stated in the comment this is just a simple template to help you understand a html structure template that can solve your problem. It is basically done with position:relative in aside and position:absolute in section, so you can control z-index of menu and leave over content and without that scrollbar that it appears there, since aside does not have to have width defined
I tried to save on CSS to make it easier to understand, and I left the comments in the code to better understand the points.
Noticethatthemenunowopensoverthenextsection,butwithoutgivingascrollbarorinterferingwithanythinginthecontentaroundyoubyhavingposition:absolute
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: azure;
}
/* a barra lateral não tem largura definida e está com o z-index definito para sobrepor a section ao lado */
aside {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
/* a section sim tem largura definida em 75% da largura da tela e fica alinhada a direita pois tem um margin-left automático que empurra a section pra direita */
section {
position: relative;
height: 100%;
width: 75%;
margin-left: auto;
background-color: silver;
}
/* CSS apenas para ativar o menu e facilitar a visualização, vc não precisa desse código CSS no seu modelo. */
label {
user-select: none;
cursor: pointer;
display: inline-block;
padding: 8px;
border: 1px solid #000;
background-color: #fff;
transition: 500ms;
}
label:hover {
background-color: limegreen;
}
li{
display: inline-block;
background-color: red;
}
nav {
display: none;
}
[type="checkbox"] {
display: none;
}
#btn:checked + nav {
display: block;
}<aside>
<!-- o conteúdo da aside vai ser o seu menu e o restante das infor que precisa. -->
<label for="btn">menu</label>
<input type="checkbox" name="" id="btn">
<nav>
<ul>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
<li>item 04</li>
<li>item 05</li>
<li>item 06</li>
</ul>
</nav>
</aside>
<!-- aqui vem o conteúdo prencipal -->
<section>123</section>