How to get menuBar to overflow in fullPage-layout?

Menu stuff has CSS styles .ui-menu, .ui-menubar, .ui-menuitem. Why not assign z-index: 9999 !important; to those style in a custom CSS file?

Oleg wrote:

Menu stuff has CSS styles .ui-menu, .ui-menubar, .ui-menuitem. Why not assign z-index: 9999 !important; to those style in a custom CSS file?

I tried it yeasterday and now again, but it doesn't help partner-menu but broke the themes and languages menus which are on top of each other like that:

Code: Select all

<style type="text/css">


            .noBorders tr, .noBorders td {
                background: none !important;
                border: none !important;
            }
           
            .ui-menu, .ui-menubar, .ui-menuitem{
                z-index: 9999 !important;
               
            }
        </style>

http://img406.imageshack.us/img406/1229/brokenmenu1.png


http://img560.imageshack.us/img560/5734/brokenmenu2.png

BTW I am using Primefaces 3.2, not 3.3 because confirmdialogs wasn't working in 3.3 like they did in 3.2 when firing events and I am using them in my software. I tried 3.3.1 though, same result. I think that I rest this case, I couldn't get it working and that is life I took the whole menu off and do something else.

Thanks anyway and have a nice summer!
Sami

Sami,

but broke the themes and languages menus which are on top of each other like that

but it's then a menu problem and not one of layout. Can you maybe keep menus separate?

Oleg wrote:

Sami,

but broke the themes and languages menus which are on top of each other like that

but it's then a menu problem and not one of layout. Can you maybe keep menus separate?

Yes I could, but it didn't help partner-menus either, it was still broken, it goes under the center pane. Later today or tomorrow I'll create a pure new project and try to implement fullpage-layout and put menu into it and try is it working or not by default like you said. If it is working, then there is something in my pages. This has been a really timetaker for me.

Sami

By the way, I have started today to re-implement Layout component from scratch jQuery Layout plugin has been changed with cool features and better pefformance. It's now possible to build endless nested layouts with only one layout component and only one JS call And all elements (like DIV, FORM) can be mixed with layout panes. You can also remove / add layout panes on-the-fly with JavaScript. Really amazing. Let's see where I will end up. Not sure about 0.5.1 release, but it will be re-implemented for 0.6.0 100%.

Oleg wrote:

By the way, I have started today to re-implement Layout component from scratch jQuery Layout plugin has been changed with cool features and better pefformance. It's now possible to build endless nested layouts with only one layout component and only one JS call And all elements (like DIV, FORM) can be mixed with layout panes. You can also remove / add layout panes on-the-fly with JavaScript. Really amazing. Let's see where I will end up. Not sure about 0.5.1 release, but it will be re-implemented for 0.6.0 100%.

Sounds very cool! What is the timetable for that?

Sami

Timeline is the next 0.6.0 release. Don't know the time exactly. The main goals of the new Layout are

1) Support of ALL possible options provided by jQuery Layout plugin (I have a great idea for that).
2) AJAX updatable nested layouts (another great idea ).
3) Possiblity to place any components / HTML elements between outer pane and nested layout.

Easy using and flexibility are another main goals.

After 4 months, this issue is still there in 0.6.1 and is a real pain for me.

I changed to PE layout and now seems to have to revert to standard primefaces layout, because there is a solution for this bug.

I tried to research the net for solution, and spent a day with playing with the css style overflow and z-index properties with no result.

Does anyone has a working solution?

I have a complete layout with several nested panes:

Code: Select all

<pe:layout fullPage="true" style="padding:0px;" id="fullPage" options="#{pControllerBean.layoutOptions}">

      <pe:layoutPane position="north" id="appHeader">
         <ui:insert name="header">
            <ui:include src="/restricted/template/common/commonHeader.xhtml" />
         </ui:insert>
      </pe:layoutPane>

      <pe:layoutPane position="center" id="content">
         <pe:layoutPane position="north" id="appTopbar" >
                             <h:form>
            <p:menubar id="menubar" widgetVar="menubar">
               <p:menuitem value="#{msg['MainMenu.label.menuDashboard']}"
                  url="/restricted/main/main.xhtml" />
               <p:menuitem value="#{msg['MainMenu.label.menuNewRequest']}"
                  url="/restricted/main/main.xhtml" />
               <p:menuitem value="#{msg['MainMenu.label.menuRequestSearch']}"
                  action="#{requestSearchAction.search}" />
                  <p:menuitem value="#{msg['MainMenu.label.menuPasswordSearch']}"
                     onclick="changePWDialog.show();" />
               <p:submenu label="#{msg['MainMenu.label.submenuAdmin']}">
                  <p:menuitem value="#{msg['MainMenu.label.menuPasswordSearch']}"
                     onclick="changePWDialog.show();" />
               </p:submenu>

            </p:menubar>
               </h:form>
         </pe:layoutPane>
         
         <ui:insert name="content" />
      </pe:layoutPane>
      
      <pe:layoutPane position="south" id="appFooter">
         <ui:insert name="footer">
            <ui:include src="/restricted/template/common/commonFooter.xhtml" />
         </ui:insert>
      </pe:layoutPane>
   </pe:layout>


This is not a bug. This is an expected behavior. All what you have to do is the right order of the layout panes. Please place the pe:layoutPane which has to be overflowed by menu component as the last pane - quite at the end, close to pe:layout tag. And then assign this pane overflow:visible style. Tip: all panes have specific selectors, look in Firebug please.

Oleg wrote:

This is not a bug. This is an expected behavior. All what you have to do is the right order of the layout panes. Please place the pe:layoutPane which has to be overflowed by menu component as the last pane - quite at the end, close to pe:layout tag. And then assign this pane overflow:visible style. Tip: all panes have specific selectors, look in Firebug please.

Thanks Oleg for the quick answer. If I understand well, you presume that my menu is outside of the panes. My problem is, that the menu is already within a layout pane. To be worse, it is in a inner pane.

Here is the layout definition:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!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:p="http://primefaces.org/ui"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:pe="http://primefaces.org/ui/extensions">

<ui:remove>
   pControllerBean : A kontroller objektum neve
</ui:remove>

<h:head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" type="text/css"
      href="/partner_web/faces/css/main.css" />
   <!-- <h:outputStylesheet name="main.css" library="css" />  -->
   <ui:insert name="stylesheet"></ui:insert>
</h:head>
<h:body>
   <pe:layout fullPage="true" style="padding:0px;" id="fullPage"
      options="#{pControllerBean.layoutOptions}">


      <pe:layoutPane position="north" id="appHeader">
         <ui:insert name="header">
            <ui:include src="/restricted/template/common/commonHeader.xhtml" />
         </ui:insert>
      </pe:layoutPane>

      <pe:layoutPane position="center" id="content">

         <pe:layoutPane position="north" id="appTopbar" style="z-index: 9999; overflow: visible;">
            <ui:insert name="topbar"/>
         </pe:layoutPane>
         
         <ui:insert name="content">
         </ui:insert>
      </pe:layoutPane>
      
      <pe:layoutPane position="south" id="appFooter">
         <ui:insert name="footer">
            <ui:include src="/restricted/template/common/commonFooter.xhtml" />
         </ui:insert>
      </pe:layoutPane>
   </pe:layout>
</h:body>
</html>



The appHeader is an application header (with logo, username, etc.), the appFooter is a footer with version and contact info and the content (center) pane contains a contains the "topbar" north layoutPane which is the place for the menu and the content insertation point may contains several additional panes as well.

I tried several other layouts with no success:

• Moving the topbar to the north (appHeader) pane as a south subpane and placing the application header into the center pane within the north pane
• The same as above, but the application header is in north-north, and topbar in north-center
• The same as above, but either or both is out of subpanes
• Moving the application header and the topbar out of layout panes

Neither worked. I'm sure the problem is within my absense of knowledge, but I am out of ideas.

Here is the code of the layoutOptions configuration for the original pane organization:

Code: Select all

 layoutOptions = new LayoutOptions();

        // options for all panes 
        LayoutOptions panes = new LayoutOptions();
        panes.addOption("slidable", false);
        panes.addOption("spacing", 6);
        panes.addOption("resizeWhileDragging", true);
        panes.addOption("closable", false);
        layoutOptions.setPanesOptions(panes);

        // options for head layout 
        LayoutOptions header = new LayoutOptions();
        header.addOption("size", "auto");
        header.addOption("minSize", "55");
        header.addOption("spacing_open", 0);
        header.addOption("resizable", false);
        layoutOptions.setNorthOptions(header);

        // options for head layout 
        LayoutOptions footer = new LayoutOptions();
        footer.addOption("resizable", false);
        footer.addOption("spacing_open", 0);
        footer.addOption("size", "auto");
        footer.addOption("minSize", 20);
        layoutOptions.setSouthOptions(footer);

        // options for center pane 
        LayoutOptions center = new LayoutOptions();
        center.addOption("spacing_open", 0);
        layoutOptions.setCenterOptions(center);

        LayoutOptions contentPanes = new LayoutOptions();
        center.setChildOptions(contentPanes);

        // options for menubar content pane
        LayoutOptions topbar = initTopbarLayout();
        if (topbar != null) {
            contentPanes.setNorthOptions(topbar);
        }

        initContentLayout(contentPanes);


Do you have any further idea?