ICEfaces
  1. ICEfaces
  2. ICE-8750

ace:dialog - Scrollable dataTable headers are miss aligned

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 3.2
    • Fix Version/s: EE-3.2.0.BETA, EE-3.2.0.GA, 3.3
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Firefox, Chrome, IE9
    • Assignee Priority:
      P1

      Description


      A scrollable ace:dataTable is shown in an ace:dialog component. When this dialog is shown the dataTable headers are miss aligned with the table contents.

        Activity

        Hide
        Nils Lundquist added a comment - - edited

        This issue was the result of table-layout:fixed being added to Firefox cases.
        In Firefox, when resizing a scrollable table in a dialog, misalignments would occur. However the later JS adjustments I'd made to FF scrolling on OS X has reduced the benefits of using table-layout:fixed, so I've removed it with out any notable style regression.
        However table-layout:fixed is still being used by necessity in IE9 cases, as without the rule, in horizontally scrollable cases, the columns of the table don't follow their fixed width rules, resulting in a misalignment of several pixels. Luckily when IE9 is layed out inside an ace:dialog, it is not misaligned, rather it is effected by a implication of 'fixed' which is the table will behave as if width:100% has been set on it, which in the case of a very wide table, results in a very wide dialog.
        I've attempted to find another configuration to make the IE9 table rendering logic follow the widths more precisely, but have yet to find any. My current suggestion to ameliorate this IE9 behavior is to set a max-width for the dialog.

        Show
        Nils Lundquist added a comment - - edited This issue was the result of table-layout:fixed being added to Firefox cases. In Firefox, when resizing a scrollable table in a dialog, misalignments would occur. However the later JS adjustments I'd made to FF scrolling on OS X has reduced the benefits of using table-layout:fixed, so I've removed it with out any notable style regression. However table-layout:fixed is still being used by necessity in IE9 cases, as without the rule, in horizontally scrollable cases, the columns of the table don't follow their fixed width rules, resulting in a misalignment of several pixels. Luckily when IE9 is layed out inside an ace:dialog, it is not misaligned, rather it is effected by a implication of 'fixed' which is the table will behave as if width:100% has been set on it, which in the case of a very wide table, results in a very wide dialog. I've attempted to find another configuration to make the IE9 table rendering logic follow the widths more precisely, but have yet to find any. My current suggestion to ameliorate this IE9 behavior is to set a max-width for the dialog.
        Hide
        Nils Lundquist added a comment - - edited

        Revision #32045
        Committed by nils.lundquist
        Moments ago
        ICE-8750 - Fixed scrollable ace:datatable layout in ace:dialog on FF.

        Show
        Nils Lundquist added a comment - - edited Revision #32045 Committed by nils.lundquist Moments ago ICE-8750 - Fixed scrollable ace:datatable layout in ace:dialog on FF.

          People

          • Assignee:
            Nils Lundquist
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: