ICEfaces
  1. ICEfaces
  2. ICE-9908

ace:dataTable - Column misalignment on load of scrollable dataTable

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.3.0.GA_P01
    • Fix Version/s: EE-3.3.0.GA_P02, 4.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Firefox, Chrome, IE10

      Description

      This issue seems to be specific to the Williams app/use case. In certain scenarios when rendering a scrollable dataTable, the columns become misaligned and seem to be off by the same width as the scrollbar that is rendered.

      This has been demonstrated with their POC app "POC-07feb2014.war" that has been uploaded to the iceasd1 server - Users\arran\Case 12619.

      Here are the steps to reproduce:

      "I have uploaded POC-07feb2014.war to the root folder of ftp site. To see the problem use Chrome or Firefox and use the first submenu item under Screen2 menu and click Retrieve button without entering any filters. The initial display should be okay (depending on monitor size and resolution your using) but when you resize the browser to reduce the width of the page the headings and columns get missaligned because the headers don't have the 15px margin-right styling."

      1. 1.PNG
        45 kB
      2. 2.PNG
        116 kB
      3. column-pinning.png
        55 kB
      4. dataTable1.PNG
        16 kB
      5. dataTable2.PNG
        10 kB
      6. dynamic-row-styling.png
        118 kB
      7. scrollbar-outside-headers.png
        148 kB
      8. static-headers.png
        13 kB

        Activity

        Hide
        Arturo Zambrano added a comment -

        3) Static Headers Test: misalignment between header and columns (all browsers), see static-headers.png.

        This issue was fixed under ICE-9955.

        Show
        Arturo Zambrano added a comment - 3) Static Headers Test: misalignment between header and columns (all browsers), see static-headers.png. This issue was fixed under ICE-9955.
        Hide
        Arturo Zambrano added a comment -

        4) DataTable inside ace:dialog (ICE-7870)
        Is this considered a misalignment when the scroll-bar is outside of the headers? this is seen on almost all demos for the dataTable with a scroll-bar, see scrollbar-outside-headers.png.

        This is not a misalignment, and it's not related to these fixes. In the past, we increased the width of the last column header to cover the scrollbar width. This was changed at some point to make the header column completely align with its body column.

        Show
        Arturo Zambrano added a comment - 4) DataTable inside ace:dialog ( ICE-7870 ) Is this considered a misalignment when the scroll-bar is outside of the headers? this is seen on almost all demos for the dataTable with a scroll-bar, see scrollbar-outside-headers.png. This is not a misalignment, and it's not related to these fixes. In the past, we increased the width of the last column header to cover the scrollbar width. This was changed at some point to make the header column completely align with its body column.
        Hide
        Arturo Zambrano added a comment -

        Testing results (issues 1 and 2 above) with IF4 trunk# 40522/ Firefox28, IE10, Chrome33:
        1) Initial issue is resolved, however when pinning / un-pinning the same column, a gap increases between the pinned column and the column in front of it. This gap disappears if the window is resized (1.PNG).
        2) Columns misalignment is resolved in FF28 and IE10 only, but not in Chrome; in all browsers though there is sorting applied to the columns that are pinned.
        In all browsers, after pinning /unpinning the columns starting from left to the right side of the table, the table becomes rendered in the half right side of the page, partially outside of the viewable area (2.PNG).

        These issues were fixed under ICE-9955 as well. It seems that the only remaining issues are those related to the ICE-8237 and ICE-9408 tests.

        Show
        Arturo Zambrano added a comment - Testing results (issues 1 and 2 above) with IF4 trunk# 40522/ Firefox28, IE10, Chrome33: 1) Initial issue is resolved, however when pinning / un-pinning the same column, a gap increases between the pinned column and the column in front of it. This gap disappears if the window is resized (1.PNG). 2) Columns misalignment is resolved in FF28 and IE10 only, but not in Chrome; in all browsers though there is sorting applied to the columns that are pinned. In all browsers, after pinning /unpinning the columns starting from left to the right side of the table, the table becomes rendered in the half right side of the page, partially outside of the viewable area (2.PNG). These issues were fixed under ICE-9955 as well. It seems that the only remaining issues are those related to the ICE-8237 and ICE-9408 tests.
        Hide
        Arturo Zambrano added a comment -

        Committed fix for issues related to the ICE-8237 and ICE-9408 tests to 4.0 trunk at revision 40940 and to 3.3 EE maintenance branch at revision 40941.

        After trying several approaches, what worked more consistently across browsers and the easiest solution was to simply change the scrollable table's styling from overflow:auto to overflow:scroll, so that the scrollbar is always visible when scrollable=true. In both tests above, the issues were due to the scrollbar disappearing, so by making it always visible (and disabled when not necessary), we facilitate the already-complex alignment calculations in scrollable tables and make them more consistent. Another advantage is that when a table with few rows dynamically receives more rows, it won't change its alignments and appearance when the scroll bar appears/becomes active.

        Show
        Arturo Zambrano added a comment - Committed fix for issues related to the ICE-8237 and ICE-9408 tests to 4.0 trunk at revision 40940 and to 3.3 EE maintenance branch at revision 40941. After trying several approaches, what worked more consistently across browsers and the easiest solution was to simply change the scrollable table's styling from overflow:auto to overflow:scroll, so that the scrollbar is always visible when scrollable=true. In both tests above, the issues were due to the scrollbar disappearing, so by making it always visible (and disabled when not necessary), we facilitate the already-complex alignment calculations in scrollable tables and make them more consistent. Another advantage is that when a table with few rows dynamically receives more rows, it won't change its alignments and appearance when the scroll bar appears/becomes active.
        Hide
        Carmen Cristurean added a comment -

        Verified using QA dataTable test application, with EE-3.3.0-maintenance # 40944/ IF4 trunk # 40946 in FF28, Chrome34, IE10, re-testing the issues mentioned in above comments:

        • Column Pinning Test
        • Dynamic Row Styling via RowStyleClass Attribute test.
        • Static Headers Test.
        • DataTable inside ace:dialog (ICE-7870)
        • ICE-8237.
          No misalignment issues have been found in these tests.
          The only issue that was still found (unrelated to this JIRA) was the increasing gap between columns when pinning/unpinning repeatedly the same column, however the gap disappears when the browser window is resized.
        Show
        Carmen Cristurean added a comment - Verified using QA dataTable test application, with EE-3.3.0-maintenance # 40944/ IF4 trunk # 40946 in FF28, Chrome34, IE10, re-testing the issues mentioned in above comments: Column Pinning Test Dynamic Row Styling via RowStyleClass Attribute test. Static Headers Test. DataTable inside ace:dialog ( ICE-7870 ) ICE-8237 . No misalignment issues have been found in these tests. The only issue that was still found (unrelated to this JIRA) was the increasing gap between columns when pinning/unpinning repeatedly the same column, however the gap disappears when the browser window is resized.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: