Question

我在所有视图中以这种方式显示对话框：

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

但它们显示在页面底部

我使用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

它们没有显示在屏幕顶部？

修改我删除了CSS样式，但对话框仍然出现在iPad的页面底部。明天我将在Mac OS X的safari中测试这个

这是我的styles.css文件：

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%;
}

我的模板文件：

<?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>

观点示例：

<?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在视图内容之前保留了对话空间： enter image description here

上次修改（找到错误）

添加styles.css文件后，我有以下代码：

<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>

如果我从模板中删除它，视图和对话框将完美显示。我不知道怎么把它放在模板里因为我需要它

Answer 1

您根据my answer your previous question上的{{3}}实现了对话框合成，以防止<p:messages>在后台重新显示对话框的消息。该答案假设您没有针对对话框对默认的PrimeFaces CSS进行任何更改。实际上，您应该删除任何自定义.ui-dialog*选择器，以便根据答案让对话框按预期工作。您还应该不需要appendToBody="true"，如答案评论中所述。

关于您观察到的问题症状;对话框在CSS中具有position的默认值fixed，这意味着它相对于视口（浏览器的可见区域）定位。换句话说，当您使用页面滚动时，它不会与页面一起滚动。对话框就在那里...... 已修复。当您将position更改为absolute时，它将相对于HTML文档本身进行定位。因此，打开对话框后，当您滚动页面时，对话框将与页面一起滚动。它会像你打开对话框那样坚持那个位置。因此，如果页面在那一刻向下滚动，对话框也将一直保持不变。

此外，PrimeFaces在打开对话框时还会运行一些JavaScript代码，以便在视口中正确居中对话框，并在必要时自动调整大小。您可以通过使用固定CSS style和left属性设置的top属性来查看它。 JavaScript根据视口计算出来。但是，当您设置appendToBody="true"并且它们以某种方式相对于HTML文档的底部进行计算时，该计算显然在Safari中失败。

对话框显示在页面底部

1 个答案: