2011-06-30 24 views
15

Tôi có một webapp JSF 2 đang sử dụng các thành phần PrimeFaces 3.0. Trên một trang, tôi đang sử dụng thành phần <p:dataTable> bên trong một thành phần tổng hợp để hiển thị một bảng các đối tượng. Tôi đã thành công với thành phần này cho đến khi tôi cố gắng sử dụng tùy chọn scrollable="true". Bây giờ các tiêu đề cột trong bảng không phù hợp với nội dung cột. Tôi đã thử sử dụng IE 7 (trình duyệt mục tiêu cho môi trường máy khách của tôi) và Firefox 4.0.1 để so sánh. Cả hai triển lãm được vấn đề, nhưng nó là rõ rệt hơn trong IE 7.Thủ tướng Chính phủ 3.0 - <p:dataTable> tiêu đề không xếp hàng bằng cách sử dụng scrollable = "true"

IE 7 screenshot:

IE 7 screenshot

Firefox 4.0.1 screenshot:

Firefox 4.0.1 screenshot

Dưới đây là một số mã trang Facelet tôi:

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

Mỗi cột của tôi có một phong cách có chiều rộng cố định bằng pixel xác định, và các DataTable chính nó có height thuộc tính thiết lập. Điều này có vẻ giống như những gì được hiển thị trong bản giới thiệu Showcase và trong bản PDF 2.2.

Để báo hướng dẫn:

cuộn là một cách để hiển thị dữ liệu với tiêu đề cố định, để kích hoạt tính năng cuộn đơn giản đặt tùy chọn cuộn true, xác định chiều cao cố định bằng pixel và thiết lập chiều rộng cố định cho mỗi cột.

Bất cứ ai có thể cho tôi biết tôi đang làm gì sai?

Tôi đang sử dụng PrimeFaces 3.0-M2-SNAPSHOT hiện tại với Mojarra 2.1 JSF RI hiện tại.

CẬP NHẬT

tôi đã chuyển đến PrimeFaces 3,0-M2 (không chụp) phát hành và vấn đề vẫn còn tồn tại. Theo các đề xuất của Maple và BalusC, tôi đã tạm thời loại bỏ việc sắp xếp cột và thử các loại tài liệu khác nhau. Cuối cùng tôi đã giải quyết trên loại tài liệu XHTML 1.0 Strict. Nó không hiển thị bất kỳ sự cải thiện trong IE 7, nhưng không hiển thị một số cải tiến trong Firefox 4.

IE 7 với XHTML 1.0 Strict

IE 7 with XHTML 1.0 Strict

Firefox 4 với XHTML 1.0 Strict

Firefox 4 with XHTML 1.0 Strict

<p:dataTable> nằm trong một <p:panel> nằm trong một số <p:layout>. Điều này có liên quan không?

+0

Nó gần như trông giống như trên Firefox 4 rằng chênh lệch chênh lệch đầu trang gần bằng với chiều rộng của thanh cuộn. Tôi nhận thấy bạn có một themeroller, không chiều rộng tiêu đề này thay đổi ở tất cả khi bạn chuyển đổi chủ đề? –

+0

Tôi đã kiểm tra trang vấn đề của Primefaces http://code.google.com/p/primefaces/issues/list và không tìm thấy vấn đề này được liệt kê dưới dạng lỗi đã biết. Có vẻ như đó có thể là vấn đề đặt độ rộng cố định thành cột, trên bảng dữ liệu có thể cuộn, trên Firefox và các phiên bản trước của IE. Trên một mặt lưu ý, THANK YOU dành thời gian để viết một câu hỏi rõ ràng và súc tích. Tôi đang trở nên mất tinh thần bởi số lượng câu hỏi khủng khiếp trên trang web này. –

+0

Điều gì sẽ xảy ra khi bạn loại bỏ thuộc tính 'sortBy' của cột. Có lẽ có các kiểu CSS trong các nút sắp xếp các phần tử DOM đang cản trở? –

Trả lời

2

Đây rõ ràng là vấn đề về CSS/JS. Không thể có bảng cuộn có tiêu đề cố định ở dạng HTML thuần túy (nếu tbody { overflow: scroll; } được hỗ trợ bởi tất cả trình duyệt ...). A lot của các giải pháp CSS/JS khác nhau (hacks) đã được phát minh để đạt được điều này. Tôi không có cái nhìn sâu sắc trong nguồn PF 3 và tôi không biết nó đang sử dụng loại hack nào. Nhưng điều này chắc chắn cần phải được reported để các PF guys. Điều duy nhất bạn có thể làm là kiểm tra xem bạn có đang sử dụng the proper HTML doctype không (đọc: a nghiêm ngặt loại tài liệu) để ít nhất MSIE không chạy trong quirks mode.

Ví dụ: HTML5

<!DOCTYPE html> 

hoặc 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"> 

hoặc 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"> 

hoặc có thể 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

Tôi đã chuyển sang XHTML 1.1. Trong IE 7 nó vẫn trông giống như tổng số crap. Trong Firefox 4, nó gần như chính xác nhưng có vẻ như nó bị lệch bởi 1 pixel. Thật không may, môi trường người dùng của tôi là 100% Internet Explorer (một kết hợp của IE 6 và IE 7 ngay bây giờ) vì vậy tìm kiếm tốt đẹp trong Firefox làm tôi không tốt. –

+2

Có khả năng PrimeFaces CSS được viết bằng XHTML 1.0 Transitional. Điều đó không làm việc cho bạn là tốt? Sau đó báo cáo nó như là một lỗi PF. – BalusC

+0

Được đăng lên http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=13509 theo quy tắc báo cáo lỗi của họ. Sẽ thêm vào theo dõi lỗi của họ khi tôi nhận được ok từ một nhà phát triển PF. –

1

Vấn đề này đã được thảo luận here on the PrimeFaces support forum.

Tính đến hôm nay (20 tháng 7 năm 2011) vấn đề bây giờ có thể được nhìn thấy trong Labs Showcase được tổ chức bởi PrimeFaces khi sử dụng trình duyệt Internet Explorer 7.0 để xem nó:

Screenshot of PrimeFaces Labs Showcase

EDIT: cố định như của phiên bản PrimeFaces 3.0-M3-SNAPSHOT ngày hôm nay (ngày 22 tháng 7 năm 2011).

+2

Tôi có Primefaces 5.1 và tiêu đề vẫn không xếp hàng cho tôi. Tôi đang sử dụng một datatable có thể cuộn được bên trong một datatable khác thông qua một phần tử . – TigerBear

+0

Tôi cũng gặp sự cố này với Primefaces 5.1 – ManicMailman

0

Tôi đã gặp vấn đề về đầu trang và chân trang gây phiền nhiễu tương tự này trên hai dự án có PF 3.4.1. Chơi với tiêu đề không giúp đỡ.

Dường như được cố định trong PF 3.5.

Các vấn đề liên quan