Help to view the Megamenu primefaces

Asked

Viewed 149 times

1

Good colleagues, I’m having trouble with the Megamenu component of primefaces I’d like the components to be visible to users but they’re hidden behind the central region, so I’d like to bring it forward. How can I do that? I tried using external css and calling more unfortunately didn’t work so I decided to use inline css as well. Below I leave images

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Menu 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">
<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>
primefaces java-ee menu

  • without code is kind of hard to help. Put the xhtml of your page there.

  • Without HTML and CSS code it is difficult to give you an accurate answer, but you can put a z-index:100 for example in your menu to see if it solves.

  • put Z-index:100 and not solved but already added the menu code and css

  • From what I’ve seen your problem is with the structure of "html", the menu is inside a container that has a certain width and the menu does not expand beyond the width of that container... have to think of a way to adjust this but will probably change the structure of the order of the tags etc, If you want and nobody to present a definitive solution I can assemble a very simple model for you to understand the concept and the idea of the layout organization, ai vc apply in your

  • Maybe, it would be a help for me @hugocsl, I just added the code of the project layout

1 answer

1


Ayrton as stated in the comment is just a simple template to help you understand a html structure model that can solve your problem. It’s basically made with position:relative in aside and position:absolute in Ction, with this you can control the z-index of menu and leave over the contents and without this scrollbar that appears there, because the aside you don’t need to have a width defined

I tried to save on CSS to make it easier to understand, and left the comments in the code for you to better understand the points.

inserir a descrição da imagem aqui

Note that the menu now opens above the next section, but does not scroll and does not interfere with anything in the contents around it because it has position: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>

Browser other questions tagged primefaces java-ee menu

You are not signed in. Login or sign up in order to post.