PrimeFaces 3.0 - <p:dataTable>标题不与使用scrollable ="true"对齐
Jim*_*ugh 15 css java datatable primefaces jsf-2
我有一个使用PrimeFaces 3.0组件的JSF 2 webapp.在一个页面上,我使用<p:dataTable>复合组件内的组件来显示对象表.在尝试使用该scrollable="true"选项之前,我已成功使用此组件.现在表格列标题不与列内容对齐.我已经尝试使用IE 7(我的客户端环境的目标浏览器)和Firefox 4.0.1进行比较.两者都表现出问题,但在IE 7中更为明显.
IE 7截图:
Firefox 4.0.1截图:
这是我的一些Facelet页面代码:
<p:dataTable
id="vesselsDataTable"
value="#{cc.attrs.vesselAdapterList}"
var="currentRow"
selection="#{editVesselBean.selectedRow}"
selectionMode="single"
scrollable="true"
height="500">
<p:column
id="imoColumn"
style="width:45px"
sortBy="#{currentRow.imo}">
<f:facet name="header">
<h:outputText value="IMO" />
</f:facet>
<div class="#{currentRow.imoStyleClass}">
<h:outputText value="#{currentRow.imo}"
</div>
</p:column>
<p:column
id="notesIndicatorColumn"
style="width:35px"
sortBy="#{currentRow.hasNotes}">
<f:facet name="header">
<h:outputText value="#{bundle.labelNotes}" />
</f:facet>
<h:outputText
styleClass="noteIndicator"
id="vesselNotesIndicator"
value="#{bundle.stringNoteIndicatorText}"
title="#{currentRow.notesAsTooltipText}"
rendered="#{currentRow.hasNotes}"
</p:column>
<ui:remove>other column definitions omitted for brevity...</ui:remove>
<p:dataTable>
我的每个列都有一个定义了固定宽度(以像素为单位)的样式,而dataTable本身具有height属性集.这似乎与Showcase演示和2.2手册PDF中显示的相同.
引用手册:
滚动是一种显示带有固定标题的数据的方法,以便将简单滚动设置可滚动选项设置为true,定义固定高度(以像素为单位)并为每列设置固定宽度.
谁能告诉我我做错了什么？
我正在使用当前的PrimeFaces 3.0-M2-SNAPSHOT和当前的Mojarra 2.1 JSF RI.
UPDATE
我已经转移到PrimeFaces 3.0-M2(非快照)版本,问题仍然存在.根据Maple和BalusC的建议,我(暂时)删除了列排序并尝试了不同的文档类型.我终于确定了XHTML 1.0 Strict doc类型.它没有显示IE 7的任何改进,但确实在Firefox 4中显示出一些改进.
IE 7与XHTML 1.0严格
Firefox 4与XHTML 1.0严格
该<p:dataTable>是里面<p:panel>是内部的<p:layout>.这有关系吗？
这显然是 CSS/JS 问题。具有固定标题的可滚动表格在纯 HTML 中是不可能的（如果所有tbody { overflow: scroll; }浏览器都支持......）。为了实现这一点，已经发明了许多不同的 CSS/JS 解决方案（黑客）。我对 PF 3 源代码没有深入了解，也不知道它使用的是哪种 hack。但这绝对需要向 PF 人员报告。您唯一可以做的就是检查您是否使用正确的 HTML 文档类型（阅读：严格的文档类型），以便至少 MSIE 不会在怪异模式下运行。
例如HTML5
<!DOCTYPE html>
或 XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<f:view contentType="text/html">
或 XHTML 1.0 严格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<f:view contentType="text/html">
或者也许是 XHTML 1.0 过渡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view contentType="text/html">
- PrimeFaces CSS 可能是根据 XHTML 1.0 Transitional 编写的。这对你也不起作用吗？然后将其报告为 PF bug。 (2认同)
| 归档时间： |
|
| 查看次数： |
19778 次 |
| 最近记录： |