Fatal编程技术网
  • css/
  • Css 对话框显示在页面底部

Css 对话框显示在页面底部

css jsf primefaces

Css 对话框显示在页面底部,css,jsf,primefaces,dialog,Css,Jsf,Primefaces,Dialog,我以这种方式在所有视图中显示对话框： <f:view locale="#{loginBB.localeCode}"> <ui:insert name="dialogs" /> <p:messages autoUpdate="true" closable="true" redisplay="false" /> <ui:insert name="content" /> </f: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样式，但是对话框仍然出现在iPad页面的底部。明天我将在MacOSX的safari中测试这个

这是my 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>
我的模板文件：

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>
如果我将其从模板中删除，视图和对话框将完美显示。我不知道如何将其放入模板中，因为我需要它

您根据关于防止
在后台重新显示对话框的消息，以这种方式实现了对话框合成。该答案假设您没有对对话框的默认PrimeFaces CSS进行任何更改。实际上，您应该删除任何自定义的
.ui对话框*
选择器，以便根据答案使对话框按预期工作。您还应该不需要回答的注释中提到的
appendToBody=“true”

至于你观察到的问题症状；对话框在CSS中有一个默认的
位置
值
fixed
，这意味着它是相对于视口（浏览器的可见区域）定位的。换句话说，当您滚动页面时，它不会随页面滚动。对话就在那里。。。固定的。当您将
位置
更改为
绝对位置
时，它将相对于HTML文档本身进行定位。因此，打开对话框后，当您滚动页面时，对话框将与页面一起滚动。它将完全停留在您打开对话框时的位置。因此，如果此时页面向下滚动，对话框也将一直保持向下


此外，PrimeFaces在打开对话框时还运行一些JavaScript代码，以便在视口中正确居中对话框，并在必要时自动调整其大小。您可以通过使用固定CSS
left
和
top
属性设置
style
属性来查看它。JavaScript会根据视口计算该值。但是，在Safari中设置
appendToBody=“true”
时，该计算显然失败了，并且它们是相对于HTML文档的底部进行计算的。
如果撤消/删除这些CSS更改会怎么样？对话框的位置是否符合预期？如果是这样的话，那么你到底为什么要对CSS进行更改呢？也许您打算用这个CSS解决的问题必须以不同的方式解决。你最好相应地重新组织问题，将注意力集中在这个问题上，而不是集中在一个不同问题的可能解决方案的副作用上。我编辑了我的问题，列出了我更改CSS的原因。它只在firefox中显示屏幕顶部的对话框。在其他浏览器中，它会在页面底部显示对话框，而没有CSS，它在所有浏览器中都适用。也许你的代码里还有更多？尝试发布一个SSCCE。@BalusC显然是在我应用了你在这里建议我的更改之后：并且删除了这个问题中提到的CSS，问题就解决了。谢谢如果你删除你的CSS并在另一个答案中使用我的CSS（没有
appendToBody=true
），那么从理论上讲，它在Mac上也可以正常工作（没有尝试过，因为我现在没有苹果的东西在我身边）。难道你没有忘记删除appendToBody=true吗？我在iPad中的safari和chrome以及Mac OS X中的safari仍然存在问题。请出示SSCCE。显然，您的代码中有更多内容导致了这个问题，这在目前提供的信息中是不可见的。我在上一个问题的评论中也提出了这个问题。您在
中有对话框的
（和
）吗？这是相当出乎意料的。现在，所有面板网格CSS也应用于该对话框。您应该将
移动到
之外，作为
的直接子级。我使用panelGrid来组织我的视图（左侧菜单的位置和右侧组件的位置）是的，我理解该部分，但对话框不应该在那里结束。他们应该是
的直系子女。将对话框的
移动到外部（如果适用wrt语言环境等，则将嵌套的
与您已有的顶级
合并）。