个人中心
gpt4 book ai didi

css - 对话框显示在页面底部

转载 作者：技术小花猫 更新时间：2023-10-29 11:40:30 25 4
gpt4 key购买 nike

我在所有 View 中都以这种方式显示对话框:

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

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 在查看内容之前保留对话框的空间: 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>

如果我将其从模板中删除， View 和对话框将完美显示。我不知道如何把它放在模板中，因为我需要它

最佳答案

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

关于您观察到的问题症状；对话框在 CSS 中有一个默认值 position fixed 的值，这意味着它相对于视口(viewport)(浏览器的可见区域)定位。换句话说，当您滚动页面时，它不会随页面滚动。对话框只是停留在那里...已修复。当您更改 position至 absolute , 那么它将相对于 HTML 文档本身定位。所以，打开对话框后，当你滚动页面时，对话框会随着页面一起滚动。它会准确地停留在您打开对话框时的那个位置。所以如果页面在那一刻向下滚动，对话框也会一直保持向下。

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

关于css - 对话框显示在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23349277/

25 4 0
文章推荐： linux - gdb中调用malloc时出现负数
文章推荐： css - 将 HTML 和 BODY 选择器样式化为高度 : 100%; vs using 100vh
文章推荐： python - 导入错误。没有名为 Commons 的模块错误 - python
文章推荐： c - execvp后如何在子进程中使用文件描述符？
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com