p:dialog cutoff issue on secondary tab

UI Components for JSF
Post Reply
RElliott
Posts: 94
Joined: 07 Feb 2014, 00:39

04 May 2015, 05:04

I use p:tab to organize my PFM application and am having an issue where my p:dialog windows are cutoff if display over secondary tabs when the main tab is longer than the window size and displays a vertical scroll bar. The following is an example form with two tabs and a help dialog.

Code: Select all

<h:form
    id="file-create-form"
    enctype="multipart/form-data">
    <p:messages
        id="messages"
        showDetail="true"
        autoUpdate="true" />
    <p:tabView id="tabView">
        <p:tab title="Main">
            <p:focus />
            <pm:field>
                <p:outputLabel
                    value="Name:"
                    for="name" />
                <p:inputText
                    id="name"
                    value="#{fileCreater.file.name}"
                    required="true"
                    requiredMessage="Name is required."
                    label="Name" />
            </pm:field>
            <pm:field>
                <p:outputLabel
                    value="Description:"
                    for="description" />
                <p:inputTextarea
                    id="description"
                    value="#{fileCreater.file.description}"
                    required="true"
                    requiredMessage="Description is required."
                    label="Description" />
            </pm:field>
            <pm:field>
                <p:outputLabel
                    value="Security:"
                    for="securityLevelSelector" />
                <p:selectOneMenu
                    id="securityLevelSelector"
                    value="#{fileCreater.level}">
                    <f:selectItem
                        itemLabel="Level 1"
                        itemValue="1" />
                    <f:selectItem
                        itemLabel="Level 2"
                        itemValue="2" />
                    <f:selectItem
                        itemLabel="Level 3"
                        itemValue="3" />
                </p:selectOneMenu>
            </pm:field>
            <pm:field>
                <p:outputLabel
                    value="Note:"
                    for="note" />
                <p:inputTextarea
                    id="note"
                    value="#{fileCreater.file.note}" />
            </pm:field>
            <pm:field>
                <p:outputLabel
                    value="Type:"
                    for="type" />
                <p:selectOneMenu
                    id="type"
                    value="#{fileCreater.file.type}"
                    required="true"
                    requiredMessage="Type is required."
                    label="Type">
                    <f:selectItem
                        itemLabel=""
                        itemValue="#{null}" />
                    <f:selectItems
                        value="#{fileCreater.types}"
                        var="type"
                        itemLabel="#{type.label}"
                        itemValue="#{type}" />
                </p:selectOneMenu>
            </pm:field>
            <pm:field>
                <p:outputLabel
                    value="Format:"
                    for="format" />
                <p:selectOneMenu
                    id="format"
                    value="#{fileCreater.file.format}"
                    required="true"
                    requiredMessage="Format is required."
                    label="Format">
                    <f:selectItem
                        itemLabel=""
                        itemValue="#{null}" />
                    <f:selectItems
                        value="#{fileCreater.formats}"
                        var="format"
                        itemLabel="#{format.label}"
                        itemValue="#{format}" />
                </p:selectOneMenu>
            </pm:field>
            <pm:field>
                <p:outputLabel
                    value="File:"
                    for="file" />
                <h:inputFile
                    id="file"
                    value="#{fileCreater.uploadedFile}"
                    required="true"
                    requiredMessage="File is required."
                    label="File" />
            </pm:field>
        </p:tab>
        <p:tab title="Editors">
            <pm:field>
                <p:outputLabel
                    value="Editor User:"
                    for="editorUser" />
                <p:inputText
                    id="editorUser"
                    value="#{fileCreater.file.editorUser}"
                    label="Editor User"
                    pt:class="elis-field-search">
                    <f:converter converterId="userConverter" />
                </p:inputText>
                <p:commandButton
                    icon="ui-icon-search"
                    styleClass="ui-nodisc-icon elis-button"
                    type="button"
                    onclick="PF('user-select-dialog').show();" />
            </pm:field>
            <pm:field>
                <p:outputLabel
                    value="Editor Group:"
                    for="editorGroupSelector" />
                <p:selectOneMenu
                    id="editorGroupSelector"
                    value="#{fileCreater.file.editorGroup}"
                    converter="groupConverter">
                    <f:selectItems
                        itemLabel=""
                        itemValue="#{null}" />
                    <f:selectItems
                        value="#{fileCreater.groups}"
                        var="group"
                        itemLabel="#{group.name}"
                        itemValue="#{group}" />
                </p:selectOneMenu>
            </pm:field>
        </p:tab>
    </p:tabView>
    <p:commandButton
        value="Create"
        action="#{fileCreater.createFile}"
        ajax="false" />
    <p:commandButton
        value="Clear"
        action="#{fileCreater.clearFile}"
        update="@form"
        immediate="true" />
</h:form>
<p:dialog
    header="Help"
    widgetVar="help-dialog"
    modal="true">
    <h:outputText
        value="#{fileCreater.help}"
        escape="false" />
    <p:commandButton
        value="Close"
        type="button"
        onclick="PF('help-dialog').hide();" />
</p:dialog>
If I perform the following steps, the dialog window will be truncated and the secondary tab will display a scroll bar:
  • 1. Open xhtml file containing the above contents.
    2. Resize the window so that the main tab displays a vertical scroll bar.
    3. Select the secondary tab.
    4. Display the help dialog.
I can use the newly displayed scroll bar to see the remainder of the dialog at this point. If I resize the browser after performing the above steps, the dialog is displayed correctly and the scroll bar disappears. The dialog continues to be displayed correctly until I close the view and start over.
PrimeFaces 7.0.1, Glassfish 5.1.0, Oracle JDK 8, Eclipse 2016-02

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 25 guests