Re: How to get menuBar to overflow in fullPage-layout?
Posted: 15 Jun 2012, 12:29
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: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?
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>
but it's then a menu problem and not one of layout. Can you maybe keep menus separate?but broke the themes and languages menus which are on top of each other like that
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.Oleg wrote:Sami,
but it's then a menu problem and not one of layout. Can you maybe keep menus separate?but broke the themes and languages menus which are on top of each other like that
Sounds very cool! What is the timetable for that?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%.
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>
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.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.
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>
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);