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?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
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>
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 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
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
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
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%.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
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%.
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.
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.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
-
- Posts: 7
- Joined: 31 Oct 2012, 15:26
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:
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.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
-
- Posts: 7
- Joined: 31 Oct 2012, 15:26
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.
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>
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
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);
-
- Information
-
Who is online
Users browsing this forum: No registered users and 19 guests