ICEfaces
  1. ICEfaces
  2. ICE-3021

Datatable: displaced table-header when headerRow is used in a scrollable table

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.6.2, 1.7RC1
    • Fix Version/s: 1.7.2
    • Component/s: None
    • Labels:
      None
    • Environment:
      windows 2000 advanced server, tomcat 6.0.16, icefaces 1.7RC1

      Description

      The table header is displaced when headerRow is used in a scrollable table.

      See http://www.icefaces.org/JForum/posts/list/7836.page

        Issue Links

          Activity

          David Soul created issue -
          Wolfgang Müller made changes -
          Field Original Value New Value
          Link This issue depends on ICE-3151 [ ICE-3151 ]
          Hide
          Michael Thiem added a comment -

          this really seems to be a bug since when the scrollable attribute is set to false the table renders correctly.

          Show
          Michael Thiem added a comment - this really seems to be a bug since when the scrollable attribute is set to false the table renders correctly.
          Michael Thiem made changes -
          Issue Type Improvement [ 4 ] Bug [ 1 ]
          Michael Thiem made changes -
          Ken Fyten made changes -
          Assignee Priority P2
          Assignee Yip Ng [ yip.ng ]
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #17311 Thu Aug 07 16:03:04 MDT 2008 yip.ng ICE-3021
          Added div as header spacer for scrollable table.
          Files Changed
          Commit graph MODIFY /icefaces/trunk/icefaces/bridge/lib/extras/dataTable.js
          Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/ext/renderkit/TableRenderer.java
          Commit graph MODIFY /icefaces/trunk/icefaces/core/src/com/icesoft/faces/renderkit/dom_html_basic/TableRenderer.java
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #17312 Thu Aug 07 16:04:06 MDT 2008 yip.ng ICE-3021
          Added div as header spacer for scrollable table.
          Files Changed
          Commit graph MODIFY /icefaces/branches/icefaces-1.7/icefaces/bridge/lib/extras/dataTable.js
          Commit graph MODIFY /icefaces/branches/icefaces-1.7/icefaces/core/src/com/icesoft/faces/renderkit/dom_html_basic/TableRenderer.java
          Commit graph MODIFY /icefaces/branches/icefaces-1.7/icefaces/component/src/com/icesoft/faces/component/ext/renderkit/TableRenderer.java
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #17331 Mon Aug 11 17:32:05 MDT 2008 yip.ng ICE-3021
          Added header spacer in headerRow when table is scrollable.
          Files Changed
          Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/ext/renderkit/TableRenderer.java
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #17332 Mon Aug 11 17:38:04 MDT 2008 yip.ng ICE-3021
          Added header spacer in headerRow when table is scrollable.
          Files Changed
          Commit graph MODIFY /icefaces/branches/icefaces-1.7/icefaces/component/src/com/icesoft/faces/component/ext/renderkit/TableRenderer.java
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #17346 Tue Aug 12 15:46:51 MDT 2008 yip.ng ICE-3021
          Added check for empty table to prevent JS error.
          Files Changed
          Commit graph MODIFY /icefaces/trunk/icefaces/bridge/lib/extras/dataTable.js
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #17347 Tue Aug 12 15:48:39 MDT 2008 yip.ng ICE-3021
          Added check for empty table to prevent JS error.
          Files Changed
          Commit graph MODIFY /icefaces/branches/icefaces-1.7/icefaces/bridge/lib/extras/dataTable.js
          yip.ng made changes -
          Summary Datatable: displaced table-header Datatable: displaced table-header when headerRow is used in a scrollable table
          Description The header is a displaced.

          See http://www.icefaces.org/JForum/posts/list/7836.page
          The table header is displaced when headerRow is used in a scrollable table.

          See http://www.icefaces.org/JForum/posts/list/7836.page
          made changes -
          Attachment screenshot-1.jpg [ 11163 ]
          Hide
          yip.ng added a comment -

          The alignment problems were caused by bugs in the renderer and bugs in the CSS for the web page. The bugs in the renderer have been fixed, but to achieve proper alignment, you still need to have the proper CSS.

          In a scrollable table, the header is actually a separate table. Therefore, the header cells will get out of alignment if their widths are not set up to match the widths of table content cells. To complicate things further, if the width of the cell contents exceeds the width of a cell, IE will stretch the cell even if the cell's overflow property is set to hidden.

          Here are a few things you should do in the CSS for the table:

          • don't specify the width of the table as a whole; let the cell widths make up the table width
          • the widths in columnWidths should be separated by commas, not semicolons; and they should have px as the length unit
          • if width of cell contents exceeds width of cells, wrap contents in panelGroup with a style like this: width:160px;overflow:hidden
          • if you are using headerRow's, you also need to set header column widths explicitly: <ice:column style="width: 35px;">; you can use the style class iceDatTblColGrpHdrCol instead if all your columns have the same width
          • if you are using headerRow's, be careful with all the rowspans and colspans
          • be sure to match padding and border widths as well

          See screenshot-1 for an example result of proper alignment. It is a scrollable table with headerRow's.

          Show
          yip.ng added a comment - The alignment problems were caused by bugs in the renderer and bugs in the CSS for the web page. The bugs in the renderer have been fixed, but to achieve proper alignment, you still need to have the proper CSS. In a scrollable table, the header is actually a separate table. Therefore, the header cells will get out of alignment if their widths are not set up to match the widths of table content cells. To complicate things further, if the width of the cell contents exceeds the width of a cell, IE will stretch the cell even if the cell's overflow property is set to hidden. Here are a few things you should do in the CSS for the table: don't specify the width of the table as a whole; let the cell widths make up the table width the widths in columnWidths should be separated by commas, not semicolons; and they should have px as the length unit if width of cell contents exceeds width of cells, wrap contents in panelGroup with a style like this: width:160px;overflow:hidden if you are using headerRow's, you also need to set header column widths explicitly: <ice:column style="width: 35px;">; you can use the style class iceDatTblColGrpHdrCol instead if all your columns have the same width if you are using headerRow's, be careful with all the rowspans and colspans be sure to match padding and border widths as well See screenshot-1 for an example result of proper alignment. It is a scrollable table with headerRow's.
          yip.ng made changes -
          Status Open [ 1 ] Resolved [ 5 ]
          Fix Version/s 1.7.2 [ 10130 ]
          Resolution Fixed [ 1 ]
          Ken Fyten made changes -
          Fix Version/s 1.7.2RC1 [ 10140 ]
          Fix Version/s 1.7.2 [ 10130 ]
          Ken Fyten made changes -
          Fix Version/s 1.7.2 [ 10130 ]
          Fix Version/s 1.7.2RC1 [ 10140 ]
          Hide
          David Soul added a comment -

          It would be interesting an example in 1.7.2 component-showcae on how to achieve a complex header with scrollable="true" in a correct form and explain the details to obtain the proper CSS.

          Show
          David Soul added a comment - It would be interesting an example in 1.7.2 component-showcae on how to achieve a complex header with scrollable="true" in a correct form and explain the details to obtain the proper CSS.
          Ken Fyten made changes -
          Status Resolved [ 5 ] Closed [ 6 ]
          Assignee Priority P2
          Assignee Yip Ng [ yip.ng ]

            People

            • Assignee:
              Unassigned
              Reporter:
              David Soul
            • Votes:
              14 Vote for this issue
              Watchers:
              9 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: