文章/答案/技术大牛

发布

社区首页 >问答首页 >对话框显示在页面底部。

问对话框显示在页面底部。
EN

Stack Overflow用户

提问于 2014-04-28 19:07:55

回答 1查看 4.4K关注 0票数 5

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

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

他们在屏幕顶部没有显示什么？

编辑：我删除了CSS样式，但是对话框仍然出现在iPads页面的底部。明天我将在Mac的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保留视图内容之前的对话框空间：

最后编辑(错误发现)

在添加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>

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

css

jsf

primefaces

dialog

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-07 20:13:15

您可以基于my answer在your previous question上实现您的对话框组合，以防止<p:messages>在后台重新显示对话框的消息。这个答案假设您没有对默认的PrimeFaces CSS进行任何有关对话框的更改。实际上，您应该删除任何自定义的.ui-dialog*选择器，以便根据答案使对话框按意图工作。您还应该使用，而不是，就像答案的注释中提到的那样，需要appendToBody="true"。

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23349277

复制

相似问题

问对话框显示在页面底部。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对话框显示在页面底部。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对话框显示在页面底部。
EN