5

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

John Alexander Betts
  • 4,718
  • 8
  • 47
  • 72
  • 1
    What if you undo/remove those CSS changes? Do the dialogs then position as intented? If so, why exactly did you made those CSS changes then? Perhaps the problem which you intented to solve with this CSS has to be solved differently. You'd better reframe the question accordingly to concentrate on that problem instead of on a side effect of a possible solution to a different problem. – BalusC Apr 28 '14 at 19:24
  • I edited my question putting the reason why I made those CSS changes. And it show the dialogs on the top of the screen only in firefox. In the other browsers it show the dialog on the bottom of the page – John Alexander Betts Apr 28 '14 at 20:51
  • 1
    Without that CSS it works for me in all browsers. Perhaps there's more into your code? Try posting an SSCCE. – BalusC Apr 28 '14 at 21:07
  • @BalusC apparently after I apply the changes that you suggest me here: http://stackoverflow.com/questions/20643367/dont-redisplay-messages-already-shown-in-dialog-in-pmessages-autoupdate-true and removing the CSS mentioned in this question, the problem was fixed. Thanks – John Alexander Betts May 06 '14 at 13:29
  • @BalusC Do you need to answer this question to accept your answer? – John Alexander Betts May 06 '14 at 13:32
  • @BalusC I have the same problem in safari on iPads and Mac OS X. Dialogs appear at the bottom of the page – John Alexander Betts May 07 '14 at 13:10
  • 1
    If you remove your CSS and use my CSS in the other answer (without `appendToBody=true`) then it should theoretically work just fine on Mac as well (haven't tried that as I don't have Apple things near me at this moment). Didn't you forgot to remove the `appendToBody=true`? – BalusC May 07 '14 at 19:29
  • Yes, you are right. I remove appendToBody="true" and all is right. Thanks @BalusC – John Alexander Betts May 07 '14 at 19:55

1 Answers1

2

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.

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • I still having problems with safari and chrome in iPad and safari in Mac OS X. – John Alexander Betts May 08 '14 at 14:01
  • Please show an SSCCE. There's apparently more into your code causing this problem which is not visible in the information provided so far. I also asked for this in the comment of the previous question. – BalusC May 08 '14 at 14:17
  • You have the `` for dialogs (and the ``) inside a ``? This is quite unexpected. Now all the panel grid CSS applies on the dialog as well. You should move that `` outside the ``, as direct child of ``. – BalusC May 08 '14 at 15:45
  • I use a panelGrid to organize my view (the position of the menu at left and the position of the components at right) – John Alexander Betts May 08 '14 at 15:51
  • 1
    Yes, I understand that part, but the dialogs shouldn't end up in there at all. They should be an immediate child of ``. Move that `` for dialogs outside (and if applicable wrt locale and such, merge the nested `` with the top level `` which you already have there). – BalusC May 08 '14 at 15:58
  • Ok, it seems your suggests fix my problem. I will deploy my application later and after I test it in all platforms I'll tell you what happened – John Alexander Betts May 08 '14 at 16:27
  • I get Dialogs in the right position but the main view appears at the bottom of the page. Firefox works very well, the other browsers reserve a blank space for dialogs and then put the main view – John Alexander Betts May 08 '14 at 19:17
  • Doing many tests I see that the problem happens when I click a p:menuitem from the p:panelMenu. If I put the url of each view directly in the browser the problem doesn't appear – John Alexander Betts May 08 '14 at 20:52
  • So you're navigating by post/ajax instead of get? – BalusC May 09 '14 at 15:57
  • I am navigating by post/ajax. The error is really shown at the bottom of my question. The real problem is a conflict with p:ajaxStatus component and its corresponding p:dialog component. If I remove that lines, dialogs load perfectly – John Alexander Betts May 09 '14 at 16:35
  • This is a great step in the right direction. You've now been able to pinpoint the real cause of the problem while trying to create a true SSCCE (please try to do this in your future questions as well, it saves yourself and us from wasting time because you didn't provide all the necessary information). Before looking into this, can you please tell the exact PrimeFaces version used? – BalusC May 10 '14 at 18:44
  • Excellent @BalusC I will do that. The PrimeFaces version is 4.0 – John Alexander Betts May 10 '14 at 18:45
  • Sorry, I can't reproduce it. Can you please edit your question to include the SSCCE? I have to make way too much edits on the code snippets provided so far in order to get it to run (removing irrelevant clutter, fixing runtime errors, stubbing data, etc). If you're still unsure about the SSCCE, check http://stackoverflow.com/tags/jsf/info for hints. Anyone on the world (including yourself) must be able to reproduce your problem by just copypasting the provided code unmodified (expect of "the obvious") into a blank environment with everything set to default (unless otherwise specified). – BalusC May 13 '14 at 12:27