OverlayPanel on multipage PrimeFaces mobile doesn't appear

tetamusha · 28 May 2016, 03:11

I have a mobile application made with PrimeFaces mobile. One of my pages works with multipage navigation and all my pages have the same menu to the left of screen, which I did with an OverlayPanel. However, on the first page of my multipage page, the OverlayPanel does not appear. Below is a MWE which I have tested and visualized this behavior. Both pages have an OverlayPanel and a button that calls it. In my case, only the button in the second page shows the panel. Have I done something wrong? Do I need one OverlayPanel for each pm:page or one for both?

Code: Select all

<!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:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:pm="http://primefaces.org/mobile">

<h:head>
    <ui:include src="libraries.xhtml" />
</h:head>
<h:body>
    <pm:page id="first">
        <pm:header title="First page">
            <p:toolbar>
                <f:facet name="left">
                    <p:commandButton type="button" value="Menu" icon="ui-icon-bars"
                        id="menu-button" />
                </f:facet>
            </p:toolbar>
        </pm:header>
        <pm:content>
            <p:commandButton value="Next" action="pm:second" />
        </pm:content>
        <p:overlayPanel for="menu-button" widgetVar="pnl-basic">
            <h:form>
                <p:menu>
                    <p:menuitem value="Home" />
                    <p:menuitem value="Thing 1" />
                    <p:menuitem value="Thing 2" />
                    <p:menuitem value="Thing 3" />
                    <p:separator />
                    <p:menuitem value="About" />
                    <p:menuitem value="Logoff" icon="ui-icon-power" />
                </p:menu>
            </h:form>
        </p:overlayPanel>
        <pm:footer />
    </pm:page>
    <pm:page id="second">
        <pm:header title="Second page">
            <p:toolbar>
                <f:facet name="left">
                    <p:commandButton type="button" value="Menu" icon="ui-icon-bars"
                        id="menu-button" />
                </f:facet>
            </p:toolbar>
        </pm:header>
        <pm:content>
            <p:commandButton value="Previous" action="pm:first" />
        </pm:content>
        <p:overlayPanel for="menu-button" widgetVar="pnl-basic">
            <h:form>
                <p:menu>
                    <p:menuitem value="Home" />
                    <p:menuitem value="Thing 1" />
                    <p:menuitem value="Thing 2" />
                    <p:menuitem value="Thing 3" />
                    <p:separator />
                    <p:menuitem value="About" />
                    <p:menuitem value="Logoff" icon="ui-icon-power" />
                </p:menu>
            </h:form>
        </p:overlayPanel>
        <pm:footer />
    </pm:page>
</h:body>
</html>

alexau · 30 May 2016, 22:06

i have the same issue

OverlayPanel on multipage PrimeFaces mobile doesn't appear

Who is online