How to get menuBar to overflow in fullPage-layout?

Community Driven Extensions Project
User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

02 Nov 2012, 20:44

If I understand well, you presume that my menu is outside of the panes.
No.

I described this case in the PrimeFaces Cookbook. Look this code please https://github.com/ova2/primefaces-cook ... alls.xhtml The menu is in the north pane which is the last pane.
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

balage1551
Posts: 7
Joined: 31 Oct 2012, 15:26

02 Nov 2012, 23:15

Oleg wrote:
If I understand well, you presume that my menu is outside of the panes.
No.

I described this case in the PrimeFaces Cookbook. Look this code please https://github.com/ova2/primefaces-cook ... alls.xhtml The menu is in the north pane which is the last pane.
Thanks again. As I see in the refered code snippet, the example uses Primefaces layout and layoutUnits. I use primefaces extensions layout and layoutPanes.
All the same, I will try to reorganize my layout to be able to move my menu into the outermost northern layoutpane. (Little harder, because I have to place a header above the menu.)

I'll will let you know if it works.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

03 Nov 2012, 17:18

As I see in the refered code snippet, the example uses Primefaces layout and layoutUnits. I use primefaces extensions layout and layoutPanes.
It doesn't matter. Both use the same jQuery Layout plugin.
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

balage1551
Posts: 7
Joined: 31 Oct 2012, 15:26

04 Nov 2012, 15:33

Ohh.
I tried all that you suggested, and with no result.
To understand your code, help me, what that size="80" on the northern pane. I thought a menubar is no more than 30 pixels in height, so why giving it a height of 80. Or is it the maximum height of the menu when dropped down?
Nevertheless, when I set the height of the northern pane so high, I got enough space to display the menu, but with the cost of allocation that space all the time. :lol:

I've already tried about three dozens of alternative layout configurations.
I even simplified my layout by dropping out several panes and replacing them with panel and panel grids.

I am sure that I am the one who doesn't understand how it should work (BTW, in my opinion, it should work out of box without deep tricks with ordering and css magic, in a library calling themself "de facto standard in the Java web development", thinking I am asking not magic, but to place a simple menubar that works... Sorry for the growl, but spending 2 workdays and a weekend with no resolution makes me a little annoyed.)

But maybe I ask it wrong, maybe I think about it wrong. I try to describe my concept and ask about the tools to achieve it:

I need a full screen solution with four, well distinguished parts:
  • A headline: a well defined sized stripe on the top with some components in it.
  • A menubar: a multi level menubar under the headline.
  • A foopter: A well defined sized stripe on the bottom.
  • A content area: occupying all the remaining area and would contain several additional panes.
That's all I want.

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

05 Nov 2012, 01:12

Did you see this showcase example?
Complex layout showcase example

Also, look at the very bottom of the page and click on the source code hyperlinks at the bottom of that page. Develop the same content/pages you see in showcase, get that working, and then develop your app, accordingly.

I know we are discussing PrimeFace Extensions pe:layout, but Cookbook discusses PrimeFaces layout, so you can start there first, to get a working 'complex' layout working, and then you can go forward and add 'complex' layout to your app.

You apologized for the growl... i 'think' i have spent more days than you trying to get PrimeFaces layout to work as designed/expected in my app (months ago), and recently, I spent days to 'try' to get PrimeFaces Extensions waypoint to work, but I gave up and i don't think you heard me complaining in this forum.

When I migrated from p:layout to pe:layout, wow, it was quite easy, I think it took 2 days as I had to learn how to 'successfully' update content 'inside' of layoutPane/layoutPanels correctly via AJAX. The p:layout section in PrimeFaces user guide is definitely enough documentation to show you how to correctly/properly/successful add layout to your app, and how to update/manipulate content in your app.

PrimeFaces Extensions pe:layout showcase examples? plenty there too to ensure success on your part to add pe:layout to your app. Because of p:layout and migration to pe:layout, I now have nested layouts, and I 'now' know how to successfully update content inside of layoutPane/Panels.

Oh, when I spent days on waypoint and finally realized that waypoint does not even meet my requirement, so I ditched the idea to add waypoint, and just added a nested layout instead, and now I'm happy, and more flexibility for enduser to navigate through the app with less clicks, because I added menu in west, moved the existing commandButton/Links in center-north, and the existing dataTable in center-center. The outer layoutPane has main menubar in north. I shared all that code in a separate topic.

I did 'not' have to worry about this menuBar overflow in fullPage-layout issue that you're having, when I migrated to pe:layout, because I had menubar overflow in fullPage-layout working when I added (PrimeFaces) p:layout to my app some months ago.

I'm loving PrimeFaces and PrimeFaces extensions!
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

balage1551
Posts: 7
Joined: 31 Oct 2012, 15:26

05 Nov 2012, 14:35

Thanks Oleg and Smithh!

I dropped everything, rebuild again and now it works. I even doesn't have to use any "tricks", nor css fine tuning, neither layout magic. :-)
I don't know what was the problem and how near I've got to the right solution by any of my several dozen tries.

Now it works on PE layoutPanes and I can focus on the visuals and contents.

Thanks again!

PS: Oleg, I tried to order your cookbook, and found out that it will be available only next February. :-D

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests