Help for viewing MegaMenu firstfaces

Navigation
3

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="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"
    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="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"
    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>
    
asked by anonymous 28.12.2018 / 11:37

1 answer

0

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>
    
28.12.2018 / 13:04
Update OS packages from a database container In PHP, does the inner pointer of an array make up its value?