Menubar (In "Top") hidden behind "Center" section

padjester · 29 Jun 2010, 12:16

Hi there

Thank you for this insightful forum. Please move this post if I have posted it in the wrong thread/topic.

I have implemented the menubar component and it works fine. I am using facelets template client, my menubar is located in the "Top" layoutUnit. When I run my project everything is there as it should be, when the drop down functionality of the menubar displays it hides behind the "center" layoutUnit. Can someone please perhaps point out how I can bring the drop down part of the menu to display infront of the "center" layoutUnit?

I have included my templateclient and template code.

Template.xhtml

<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<link href="./../resources/css/MenubarCss.css" rel="stylsheet" type="text/css" />
<title>The O'Hanna's Group</title>
</h:head>

<h:body styleClass="yui-skin-sam">

<p:layout fullPage="true">
<p:layoutUnit position="top" height="75" >
<ui:insert name="top">test</ui:insert>
</p:layoutUnit>

<p:layoutUnit position="left" width="200" >
<ui:insert name="left"></ui:insert>
</p:layoutUnit>

<p:layoutUnit position="right" width="200" >
<ui:insert name="right"></ui:insert>
</p:layoutUnit>

<p:layoutUnit position="center" >
<ui:insert name="center"></ui:insert>
</p:layoutUnit>

<p:layoutUnit position="bottom" height="75">
<ui:insert name="bottom"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>

TemplateClient.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
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.prime.com.tr/ui"
template="./Templates/OHTemplate.xhtml">

<ui:define name="top">
<p:menubar>
<p:submenu label="O'Hanna's Group Home" labelStyle="visible" >
<p:menuitem label="O'Hanna's Group Home" url="OHannasGroupHome.xhtml"></p:menuitem>
</p:submenu>

<p:submenu label="Explore Venues">
<p:submenu label="O'Hanna's Inn Gauteng">
<p:menuitem label="Venue Profile" url="GautengVenueProfile.xhtml"></p:menuitem>
<p:menuitem label="Digital Tour" url="GautengTour.xhtml"></p:menuitem>
</p:submenu>

<p:submenu label="O'Hanna's Hotel and Conference Cape Town" >
<p:menuitem label="Venue Profile" url="CapeTownVenueProfile.xhtml"></p:menuitem>
<p:menuitem label="Digital Tour" url="CapeTownTour.xhtml"></p:menuitem>
</p:submenu>

<p:submenu label="O'Hanna's Hotel and Wellness Centre Ireland" >
<p:menuitem label="Venue Profile" url="IrelandVenueProfile.xhtml"></p:menuitem>
<p:menuitem label="Digital Tour" url="IrelandTour.xhtml"></p:menuitem>
</p:submenu>
</p:submenu>

<p:submenu label="Specials">
<p:menuitem label="Midweek Specials at O'Hanna's Inn Gauteng" url="MidweekSpecialsGauteng.xhtml"></p:menuitem>
<p:menuitem label="Group Specials at O'Hanna's Hotel and Conference Cape Town" url="GroupSpecialsCapeTown.xhtml"></p:menuitem>
<p:menuitem label="Wellness Break at O'Hanna's Hotel and Wellness Centre Ireland" url="WellnessBreakIreland.xhtml"></p:menuitem>
<p:menuitem label="Early Booking Saver at any O'Hanna's Hotel" url="EarlyBookingSaverAll.xhtml"></p:menuitem>
</p:submenu>

<p:submenu label="The Green Club">
<p:menuitem label="Why Go Green" url="WhyGoGreen.xhtml"></p:menuitem>
<p:menuitem label="Earning and Using Points" url="HowToEarnAndUsePoints.xhtml"></p:menuitem>

<p:menuitem label="Sign Up" url="DELETERegisterGreenClub.xhtml"></p:menuitem>

<p:submenu label="My Green Account">
<p:menuitem label="View My Green Account" url="DELETEMyGreenAccount.xhtml"></p:menuitem>
<p:menuitem label="Update Account" url="DELETEUpdateAccount.xhtml"></p:menuitem>
<p:menuitem label="Request New Password" url="DELETERequestPassword.xhtml"></p:menuitem>
<p:menuitem label="Booking History" url="DELETEBookingHistory.xhtml"></p:menuitem>
</p:submenu>
<p:menuitem label="Green Club Rules" url="GreenClubRules.xhtml"></p:menuitem>
</p:submenu>

<p:submenu label="Travel Resources">
<p:submenu label="Local Guide">
<p:menuitem label="Attractions" url="Attractions.xhtml"></p:menuitem>
<p:menuitem label="Sporting Locations" url="SportingLocations.xhtml"></p:menuitem>
<p:menuitem label="Tour Operators" url="TourOperators.xhtml"></p:menuitem>
</p:submenu>
</p:submenu>
<p:submenu label="Reservations">
<p:submenu label="Manage My Reservations">
<p:menuitem label="View My Reservation" url="DELETEViewMyReservation.xhtml"></p:menuitem>
<p:menuitem label="Edit a Reservation" url="DELETEEditMyReservation.xhtml"></p:menuitem>
<p:menuitem label="Cancel a Reservation" url="DELETECancelMyReservation.xhtml"></p:menuitem>
</p:submenu>
</p:submenu>

<p:submenu label="About O'Hanna's">
<p:menuitem label="Vision and Mission" url="VisionAndMission.xhtml"></p:menuitem>
<p:menuitem label="Privacy Policy" url="PrivacyPolicy.xhtml"></p:menuitem>
<p:menuitem label="Terms and Conditions" url="TermsAndConditions.xhtml"></p:menuitem>
<p:menuitem label="Customer Feedback" url="CustomerFeedback.xhtml"></p:menuitem>
<p:menuitem label="Careers" url="Careers.xhtml"></p:menuitem>
<p:menuitem label="Contact Us" url="ContactUs.xhtml"></p:menuitem>
</p:submenu>

<p:submenu label="Rates">
<p:menuitem label="Rate Structure" url="Rates.xhtml"></p:menuitem>
</p:submenu>

<p:submenu label="Help">
<p:menuitem label="Website" url="WebsiteHelp.xhtml"></p:menuitem>
<p:menuitem label="Green Club" url="GreenClubHelp.xhtml"></p:menuitem>
<p:menuitem label="Technical" url="TechnicalIssues.xhtml"></p:menuitem>
</p:submenu>

</p:menubar>
</ui:define>

<ui:define name="left">

</ui:define>

<ui:define name="right">

</ui:define>

<ui:define name="center">

<p:imageSwitch effect="FadeIn" widgetVar="fadein" slideshowAuto="true">
<p:graphicImage value="resources/images/HotelCT.jpg" />
<p:graphicImage value="resources/images/HotelGP.jpg" />
</p:imageSwitch>

</ui:define>

<ui:define name="bottom">

</ui:define>

</ui:composition>

I would appreciate any advise and input as to how to go about bringing the menubar to render over the "center" layoutUnit.

Thank you
Kind regards

bercolax · 29 Jun 2010, 14:07

I solved similar issue for p:schedule. Please try to assign similar style for the center layout. The details can be found in the link below.

http://primefaces.prime.com.tr/forum/vi ... f=3&t=2696

30 Jun 2010, 12:02

On layoutunits that goes on top of menubar, try setting scrollable option to null and give a higher z-index to the menubar. I've tried this recently and it worked well.

padjester · 02 Jul 2010, 10:43

Hi there

Thank you for the advice guys, Optimus.Prime, your suggestion did the trick in a flash of time.

The code snipped looks as follow;

<p:layout fullPage="true" >
<p:layoutUnit position="top" height="100" zindex="199" style="padding:0;overflow:visible" scrollable="null">
<ui:insert name="top">test</ui:insert>
</p:layoutUnit>

Wonderful website, thank you

Kind regards

02 Jul 2010, 10:46

Thanks for sharing the solution code, glad it works now.

Soupdragon · 22 Jul 2011, 11:01

I'm getting the same problem but I'm using the 3.0_M2 version and I seem to be blocked from this solution. The crucial scrollable attribute (plus zindex) has now been removed from the layoutUnit and I can find no way of stopping the top layoutunit from generating a scroll bar to "accomodate" the dropped menu box. Hence when the menu drops scroll bars appear on the top layoutUnit and the menu box is accesible only by scrolling. I cannot get it to extend outside of the top layout unit. I've tried placing overflow: visible and z-index in the style of the layout unit, without effect.

(The same thing happens on both Firefox and Internet Explorer).

22 Jul 2011, 11:05

See;

http://www.primefaces.org/showcase-labs ... omplex.jsf

Soupdragon · 22 Jul 2011, 11:46

Thanks. You know I tried that but it looks like something went wrong with my style elements. They were being ingored due to invalid formatting, which seems weird.

douglasjunior · 10 Feb 2015, 13:04

Sorry revive the topic.

In version 5.1 there is no attribute scrollable="null"

Any solution?

douglasjunior · 10 Feb 2015, 13:18

I found the solution https://code.google.com/p/primefaces/so ... plex.xhtml

Menubar (In "Top") hidden behind "Center" section

Who is online