ICEfaces
  1. ICEfaces
  2. ICE-8473

ace:dataTable - header/table placement issue when used in an ace:panel

          Details

          • Type: Bug Bug
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: 3.1
          • Fix Version/s: 3.2
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            IE7, IE8/9 Compat Mode
          • Workaround Exists:
            Yes
          • Workaround Description:
            Remove the width and custom CSS.

            Description

            An ace:dataTable is included in a toggleable ace:panel. When displayed in IE7 or IE8/9 Compat modes and the ace:panel is expanded, the ace:dataTable is shown as being shifted down until the mouse is moved where it will snap back to its correct position.

            The other issue is when this is used in an ace:panelExpansion of a parent ace:dataTable. The issue here is that the nested dataTable headers are shifted down until the mouse is moved.

            All of these issues seem to be due to setting the style attribute of the ace:dataTable to use a percentage or pixel width. For example: style="width: 100%;"

            Also the follow custom CSS also shows the issue with the nested dataTable:

            .ui-datatable th {
                position: static !important;
            }

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              Arran Mccullough added a comment -

              Attached test case that shows the behavior.

              Steps:

              • Load welcomeICEfaces.jsf, an ace:panel with a two record ace:dataTable is shown.
              • Try contracting and then expanding the panel. Upon expansion the dataTable is shown shifted, move the mouse and it jumps back.
              • Next expand one of the nested panels of the dataTable. Another panel/dataTable is shown.
              • Contracting and then expanding the panel causes the nested dataTables header to shift down into the table body.
              Show
              Arran Mccullough added a comment - Attached test case that shows the behavior. Steps: Load welcomeICEfaces.jsf, an ace:panel with a two record ace:dataTable is shown. Try contracting and then expanding the panel. Upon expansion the dataTable is shown shifted, move the mouse and it jumps back. Next expand one of the nested panels of the dataTable. Another panel/dataTable is shown. Contracting and then expanding the panel causes the nested dataTables header to shift down into the table body.
              Hide
              Permalink
              Arran Mccullough added a comment -

              In addition to the custom CSS there seems to be an issue with the default CSS that is being rendered for the ace:dataTable component which is also causing this issue. Testing with the 3.1.0 and 3.2.0 ALPHA1 jars with all the custom CSS removed is displaying this issue. Previous to these releases the "ui-widget-header" had a "position:relative" applied to it through the combined.css file in the "ui-datatable th" style class.

              With the recent release this is no longer being applied. This is now causing the issue through the CSS being applied to the "ui-header-column clickable" which has a "position:relative" value applied through the combined.css file in the "ui-datatable th .ui-header-column" style class.

              EIther the previous style needs to be added back in or the left over "position: relative" needs to be removed.

              Show
              Arran Mccullough added a comment - In addition to the custom CSS there seems to be an issue with the default CSS that is being rendered for the ace:dataTable component which is also causing this issue. Testing with the 3.1.0 and 3.2.0 ALPHA1 jars with all the custom CSS removed is displaying this issue. Previous to these releases the "ui-widget-header" had a "position:relative" applied to it through the combined.css file in the "ui-datatable th" style class. With the recent release this is no longer being applied. This is now causing the issue through the CSS being applied to the "ui-header-column clickable" which has a "position:relative" value applied through the combined.css file in the "ui-datatable th .ui-header-column" style class. EIther the previous style needs to be added back in or the left over "position: relative" needs to be removed.
              Hide
              Permalink
              Nils Lundquist added a comment -

              ICE-8473 - Removed extraneous positioning rules from DataTable, resolving issue.

              This is a regression risk.

              Show
              Nils Lundquist added a comment - ICE-8473 - Removed extraneous positioning rules from DataTable, resolving issue. This is a regression risk.

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: