Layout pitfalls with menus and dialogs

When working with the Layout component, we should be aware of pitfalls with menus and dialogs inside layout units. Beginners often face overlap issues and try to find several workarounds. In fact, there are easy solutions available.

In this recipe, we will show how to overcome these issues. We will integrate p:menubar and p:dialog into layout units.

How to do it...

Assume we have a full page layout with two layout units, center and north. The north unit contains a Menubar component with quite normal options.

<p:layout fullPage="true"> <p:layoutUnit position="center"> Center </p:layoutUnit> <p:layoutUnit position="north" size="80" resizable="false"> <h:form> <p:menubar> <p:submenu label="JavaScript Libraries"> ...

Get PrimeFaces Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.