Question

I have a modal dialog that contains some input components.

The problem appears when a p:layout is used inside the dialog. The p:inputText component within a p:layoutUnit can gain focus at the first time, but then it become unresponsive to the keyboard, because no input text is showed, nor I’m able to switch to other input fields using the tab keyword (I can switch to another input component with the mouse only).

Setting modal=”false” solve the problem, but I need a modal dialog.

Here is my code:

<h:form id="outerForm">
    <p:commandButton id="button" value="Show dialog" onclick="dialogVar.show()" type="button" />

    <p:dialog id="dialog" header="inputText inside p:layout will not work" widgetVar="dialogVar" modal="true" resizable="false" closeOnEscape="true">

            <h:inputText />
            <p:autoComplete />

            <p:panelGrid columns="2">
                <h:outputLabel value="Write something" />
                <p:inputText />
                <h:outputLabel value="Write something else" />
                <p:inputText />
                <h:outputLabel value="Text Area" />
                <p:inputTextarea rows="4" cols="30" autoResize="false" />
            </p:panelGrid>

            <p:layout id="diffDialogLayout" style="height:400px;width:900px;">

                <p:layoutUnit id="diffWestUnit" position="west" size="45%">
                    <p:panelGrid columns="2">
                        <h:outputLabel value="Write something" />
                        <p:inputText />
                        <h:outputLabel value="Write something else" />
                        <p:inputText />
                        <h:outputLabel value="Text Area" />
                        <p:inputTextarea rows="4" cols="30" autoResize="false" />
                    </p:panelGrid>
                </p:layoutUnit>

                <p:layoutUnit id="diffCenterUnit" position="center">
                    <br />
                </p:layoutUnit>
            </p:layout>

            <h:inputText />

    </p:dialog>
</h:form>

My environment:

• PrimeFaces 3.4.2
• PrimeFaces Extensions 0.6.1
• Mojarra 2.1.13
• Tomcat 7.0.30
• Eclipse Indigo SR1

Edit

The proposed solution works fine. The problem can be solved with the following CSS code:

.ui-dialog { z-index: 1005 !important; }
.ui-layout-pane-west { z-index: 1010 !important; }
.ui-layout-pane-center { z-index: 1010 !important; }

or, if you want it for a specific dialog only:

#outerForm\3A diffDialog.ui-dialog { z-index: 1005 !important; }
#outerForm\3A diffWestUnit.ui-layout-pane-west { z-index: 1010 !important; }
#outerForm\3A diffCenterUnit.ui-layout-pane-center { z-index: 1010 !important; }

The \3A character is used for compatibility with IE 6-8, as stated here: Handling a colon in an element ID in a CSS selector.

Answer 1

I can able to reproduce your problem, The source of this problem is the z-index:1003 which is automatically inserted when using modal=true attribute in primefaces <p:dialog>

you can make a workaround using a small css hack

css:

.ui-layout-pane-west
{
z-index:1008 !important; /*any value higher than the modal dialog's z-index */
}


before using the above css i suggest you to check the z-index of modal panel and change the value accordingly.

Edit

Take a look at the following link Problem with p:layout inside of p:dialog at primefaces forum, Taking a closer look at the source of jQuery Layout and jQuery Dialog of which primefaces components are built, You can see that dialogLayout_settings = {
zIndex: 0
} modal dialog is initialized with z-index:0, hence i suggest you to set the z-index of <p:dialog> to some constant value, like

.ui-dialog{z-index:1005 !important;}

however test this with your other components to avoid overlaps.

Hope this helps.