Dialogs are showing at the bottom of the page

StackOverflow https://stackoverflow.com/questions/23349277

  •  11-07-2023
  •  | 
  •  

Question

I am showing the dialogs at this way in all the views:

<f:view locale="#{loginBB.localeCode}">
    <ui:insert name="dialogs" />
    <p:messages autoUpdate="true" closable="true" redisplay="false" />
    <ui:insert name="content" />
</f:view>

But they are showing at the bottom of the page

I have made this changes in all dialogs using CSS:

/* Put the dialogs on the top of the screen. It only works on firefox */
.ui-dialog {
    position: absolute;
}

/* Disable scroll on the loading dialog */
.disable-scroll .ui-dialog-content {
    overflow: hidden;
    width: auto;
}

enter image description here

What they are not showing at the top of the screen?

Edit: I removed the CSS styles but dialogs still appearing at the bottom of the page in iPads. Tomorrow I will test this in safari from Mac OS X

This is my styles.css file:

td.right {
    text-align: right;
}

td.center {
    text-align: center;
}

table td,table tr {
    vertical-align: top;
}

.ui-datatable .ui-datatable-data tr,.ui-datatable .ui-datatable-data-empty tr,.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td
    {
    border-color: #C1DFFA;
}

.odd-row {
    background: #ECF5FE;
}

.ui-panelgrid tr,.ui-panelgrid td {
    border: none;
}

.ui-panelgrid td {
    padding: 2px;
}

.panelgrid-center {
    margin: 0 auto !important;
}

.ui-inputfield.uppercased {
    text-transform: uppercase;
}

.ui-inputfield {
    text-transform: uppercase;
}

.ui-inputfield.no-uppercased {
    text-transform: none;
}

.ui-selectonemenu {
    width: 144px !important;
}

.ui-selectonemenu-label {
    font-size: 95%;
    width: 100% !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item {
    font-size: 95%;
    overflow-x: hidden;
}

.ui-inputtext {
    width: 137px !important;
}

.ui-widget {
    font-size: 70%;
}

.ui-panel {
    float: left;
}

.ui-outputlabel-rfi {
    color: red;
}

.ui-outputlabel {
    font-weight: bold;
}

.ui-menubar {
    background: #C1DFFA;
}

.ui-panel .ui-panel-content {
    padding: 0;
}

.ui-datatable thead th,.ui-datatable tbody td,.ui-datatable tfoot td {
    padding: 2px;
}

.justify-text {
    text-align: justify !important;
}

.negative-number {
    color: red;
}

.small-icon {
    height: 15px;
    width: 15px;
}

.small-inputtext {
    width: 80px !important;
}

.full-width {
    width: 100%;
}

My template file:

<?xml version='1.0' encoding='UTF-8' ?>
<!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:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:o="http://omnifaces.org/ui" xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view contentType="text/html">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="#{resource['images:favicon.ico']}" rel="shortcut icon"
            type="image/x-icon" />
        <script type="text/javascript">
            $(document).ready(
                function() {
                    $("div[role='tabpanel']").attr("aria-hidden", "false").attr(
                            "style", "display: block");
                    $("h3[role='tab']").removeClass("ui-corner-all").addClass(
                            "ui-corner-top ui-state-active").find("span").attr(
                            "class", "ui-icon ui-icon-triangle-1-s");
                });
        </script>
    </h:head>
    <h:body>
        <o:importConstants type=" ... Constants 1 ... " />
        <o:importConstants type=" ... Constants 2 ... " />
        <h:outputStylesheet library="css" name="styles.css" />

                ...

        <p:panelGrid>
            <p:row>
                <p:column>
                    ... Here is located the application menu ...
                </p:column>
                <p:column>
                    <f:view locale="#{loginBB.localeCode}">
                        <ui:insert name="dialogs" />
                        <p:messages autoUpdate="true" closable="true" redisplay="false" />
                        <ui:insert name="bodyContent" />
                    </f:view>
                </p:column>
            </p:row>
        </p:panelGrid>
    </h:body>
</f:view>
</html>

Example of view:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:o="http://omnifaces.org/ui"
    xmlns:of="http://omnifaces.org/functions"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="/WEB-INF/templates/main_template.xhtml">
    <ui:define name="bodyContent">
        ... Body components ...
    </ui:define>

    <ui:define name="dialogs">
        <p:dialog closeOnEscape="true"
            header="Find products" id="products"
            modal="true" position="top" widgetVar="productsWV">
            <h:form id="productsForm">
                <p:focus for="productName" />
                <pe:keyFilter for="code" mask="pint" />
                <pe:keyFilter for="productName" mask="alpha" />
                <f:view locale="#{loginBB.localeCode}">
                    <p:messages closable="true" />
                </f:view>
                <p:panelGrid columns="1">
                    ... Dialog components ...
                </p:panelGrid>
            </h:form>
        </p:dialog>
    </ui:define>
</ui:composition>

Chrome is reserving the space of dialogs before the view content: enter image description here

Last Edit (Error found)

After adding the styles.css file I have the following peace of code:

<h:form>
    <p:ajaxStatus onerror="loadingDLG.hide(); ajaxErrorDLG.show()"
        onstart="loadingDialog.show()" onsuccess="loadingDLG.hide()">
    </p:ajaxStatus>
    <p:dialog closable="false" draggable="false" modal="true"
        resizable="false" showHeader="false" styleClass="disable-scroll"
        widgetVar="loadingDialog">
        <p:graphicImage value="#{resource['images:loading.gif']}" />
    </p:dialog>
</h:form>

If I remove it from the template, the views and the dialogs are shown perfectly. I don't know how to put it in the template because I need it

Was it helpful?

Solution

You implemented your dialog composition that way based on my answer on your previous question about preventing the <p:messages> from redisplaying the dialog's messages in the background. That answer assumed that you didn't made any changes to the default PrimeFaces CSS with regard to dialogs. You should in fact remove any custom .ui-dialog* selectors in order to get the dialogs to work as intented based on the answer. You should also not have the need for appendToBody="true" as mentioned in the comments of the answer.

As to the problem symptoms you observed; dialogs have in CSS a default position value of fixed, meaning that it's positioned relative to the viewport (the browser's visible area). In other words, it doesn't scroll along with the page when you scroll with the page. The dialog just stays there ... fixed. When you change the position to absolute, then it would be positioned relative to the HTML document itself. So, after opening the dialog, the dialog will scroll along with the page when you scroll the page. It'll stick at exactly that position as it was at the moment you opened the dialog. So if the page was scrolled down at that moment, the dialog will also stay down all the time.

Further, PrimeFaces runs also some JavaScript code when the dialog is opened in order to properly center the dialog in the viewport and if necessary also auto-size it. You can see it by the style attribute being set with fixed CSS left and top properties. The JavaScript calculates that based on the viewport. However, that calculation apparently failed in Safari when you set appendToBody="true" and they were somehow calculated relative to the bottom of the HTML document.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top