对话框显示在页面底部
Joh*_*tts 5 css jsf dialog primefaces
我在所有视图中以这种方式显示对话框:
<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样式,但对话框仍然出现在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在视图内容之前保留了对话框的空间:
上次编辑(找到错误)
添加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>
如果我从模板中删除它,视图和对话框将完美显示.我不知道如何把它放在模板中,因为我需要它
您根据我对您之前有关防止<p:messages>在后台重新显示对话框消息的问题的回答，以这种方式实现了对话框组合。该答案假设您没有对有关对话框的默认 PrimeFaces CSS 进行任何更改。事实上，您应该删除所有自定义.ui-dialog*选择器，以使对话框根据答案按预期工作。您也不应该像appendToBody="true"答案的评论中提到的那样需要。
关于您观察到的问题症状；对话框在 CSS 中的默认position值为fixed，这意味着它相对于视口（浏览器的可见区域）定位。换句话说，当您随页面滚动时，它不会随页面一起滚动。该对话框只是停留在那里......固定。当您更改positionto时absolute，它将相对于 HTML 文档本身定位。所以，打开对话框后，当你滚动页面时，对话框会随着页面一起滚动。它会准确地停留在您打开对话框时的位置。因此，如果页面当时向下滚动，对话框也将始终保持向下状态。
此外，当对话框打开时，PrimeFaces 还会运行一些 JavaScript 代码，以便使对话框在视口中正确居中，并在必要时自动调整其大小。您可以通过使用固定 CSS和属性style设置的属性来查看它。JavaScript 根据视口进行计算。然而，当您设置时，该计算在 Safari 中显然失败了，并且它们以某种方式相对于 HTML 文档的底部进行了计算。lefttopappendToBody="true"
| 归档时间： |
|
| 查看次数： |
2998 次 |
| 最近记录： |