当前位置：文江博客话题详情

PrimeFaces 3.0 - 标题与使用scrollable=“true”不一致

发布于 2024-11-17 19:36:20 字数 2801 浏览 6 评论 0 原文

我有一个使用 PrimeFaces 3.0 组件的 JSF 2 Web 应用程序。在一个页面上，我使用复合组件内的组件来显示对象表。在我尝试使用 scrollable="true" 选项之前，我已经成功使用此组件。现在，表格列标题与列内容不对齐。我尝试使用 IE 7（这是我的客户端环境的目标浏览器）和 Firefox 4.0.1 进行比较。两者都存在该问题，但在 IE 7 中更为明显。

IE 7 屏幕截图：

IE 7 屏幕截图

Firefox 4.0.1 屏幕截图:

“火狐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，定义固定高度（以像素为单位）并为每列设置固定宽度。 p>

任何人都可以吗？告诉我我做错了什么？

我正在使用当前的 PrimeFaces 3.0-M2-SNAPSHOT 和当前的 Mojarra 2.1 JSF RI。

更新

我已转移到 PrimeFaces 3.0-M2（非快照）版本，问题仍然存在。根据 Maple 和 BalusC 的建议，我（暂时）删除了列排序并尝试了不同的文档类型。我最终选择了 XHTML 1.0 Strict 文档类型。它在 IE 7 中没有显示出任何改进，但在 Firefox 4 中显示出一些改进。

采用 XHTML 1.0 Strict 的 IE 7

严格 XHTML 1.0 的 IE 7

严格 XHTML 1.0 的 Firefox 4

Firefox 4 with XHTML 1.0 Strict

位于 < p:panel> 位于内。这可能有关系吗？

原文

I have a JSF 2 webapp that is using PrimeFaces 3.0 components. On one page, I'm using the <p:dataTable> component inside a composite component to display a table of objects. I've had success with this component until I tried to use the scrollable="true" option. Now the table column headers do not line up with the column content. I have tried using IE 7 (which is the target browser for my client environment) and Firefox 4.0.1 for comparison. Both exhibit the problem, but it is more pronounced in IE 7.

IE 7 screenshot:

IE 7 screenshot

Firefox 4.0.1 screenshot:

Firefox 4.0.1 screenshot

Here is some of my Facelet page code:

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

Each of my columns has a style with a fixed width in pixels defined, and the dataTable itself has the height attribute set. This seems to be the same as what is shown in the Showcase demo and in the 2.2 manual PDF.

To quote the manual:

Scrolling is a way to display data with fixed headers, in order to enable simple scrolling set scrollable options to true, define a fixed height in pixels and set a fixed width to each column.

Can anyone tell me what I'm doing wrong?

I'm using the current PrimeFaces 3.0-M2-SNAPSHOT with the current Mojarra 2.1 JSF RI.

UPDATE

I have moved to the PrimeFaces 3.0-M2 (not snapshot) release and the problem still exists. Following the suggestions by Maple and BalusC, I have (temporarily) removed the column sorting and tried different doc types. I finally settled on the XHTML 1.0 Strict doc type. It does not show any improvement in IE 7, but does show some improvement in Firefox 4.

IE 7 with XHTML 1.0 Strict

IE 7 with XHTML 1.0 Strict

Firefox 4 with XHTML 1.0 Strict

Firefox 4 with XHTML 1.0 Strict

The <p:dataTable> is inside a <p:panel> which is inside a <p:layout>. Could this be related?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吾家有女初长成 2024-11-24 19:36:20

这显然是 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 Strict

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

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

This is clearly a CSS/JS issue. A scrollable table with fixed headers is impossible in plain HTML (if tbody { overflow: scroll; } were supported by all browsers...). A lot of different CSS/JS solutions(hacks) have been invented to achieve this. I don't have insight in PF 3 source and I don't know which hack it is using. But this definitely needs to be reported to the PF guys. The only thing which you can do is to check if you're using the proper HTML doctype (read: a strict doctype) so that at least MSIE doesn't run in quirks mode.

E.g. HTML5

<!DOCTYPE html>

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

or XHTML 1.0 Strict

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

or maybe XHTML 1.0 Transitional

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

回复收藏 0 原文