ICEfaces
  1. ICEfaces
  2. ICE-10041

showcase - ace:dataTable Scrolling demo columns misalignment in config panel (IE10)

          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:
            Jenkins EE 3 trunk Build # 425/ 427
            Server: Tomcat7
            Browsers: all (tested in FF29, IE10, Chrome34)
          • Assignee Priority:
            P2

            Description

            showcase > Scrolling:
            When Table Height (in pixels) = 500, there is header - columns misalignment in the panelConfig Panel when scrolling to far right, as seen in attached screen shot (all browsers).

              Activity

              Ascending order - Click to sort in descending order
              Carmen Cristurean created issue -
              Carmen Cristurean made changes -
              Field Original Value New Value
              Fix Version/s EE-3.3.0.GA_P02 [ 11371 ]
              Carmen Cristurean made changes -
              Attachment Capture.PNG [ 17200 ]
              Ken Fyten made changes -
              Assignee Arturo Zambrano [ artzambrano ]
              Assignee Priority P2 [ 10011 ]
              Hide
              Permalink
              Arturo Zambrano added a comment -

              For this particular demo, if we simply removed the 'rows' attribute (and the 'paginator' attribute too, since it wouldn't be needed) from the table in the dialog, there wouldn't be misalignments. What happens is that when scrollable=true and a specified height is significantly larger than the height required to display the number of specified rows, the headers tend to expand to cover the area above of the scrollbar, rendering the header and the body columns misaligned.

              Show
              Arturo Zambrano added a comment - For this particular demo, if we simply removed the 'rows' attribute (and the 'paginator' attribute too, since it wouldn't be needed) from the table in the dialog, there wouldn't be misalignments. What happens is that when scrollable=true and a specified height is significantly larger than the height required to display the number of specified rows, the headers tend to expand to cover the area above of the scrollbar, rendering the header and the body columns misaligned.
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #41215 Tue May 27 10:30:17 MDT 2014 art.zambrano ICE-10040, ICE-10041 increased minimum height requirement for tables; removed 'rows' and 'paginator' attributes from table in the dialog
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/dataTable/dataTableScrolling.xhtml
              Hide
              Permalink
              Arturo Zambrano added a comment -

              Committed fix to 4.0 trunk at revision 41215 and to 3.3 EE maintenance branch at revision 41214. Removed 'rows' and 'paginator' attributes from the table in the dialog.

              Show
              Arturo Zambrano added a comment - Committed fix to 4.0 trunk at revision 41215 and to 3.3 EE maintenance branch at revision 41214. Removed 'rows' and 'paginator' attributes from the table in the dialog.
              Arturo Zambrano made changes -
              Status Open [ 1 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Hide
              Permalink
              Carmen Cristurean added a comment -

              Tested with EE-3.3.0-maintenance branch rev.41218/ IF4 trunk rev.41215:

              • no issues found in Firefox29, Chrome35.
              • IE7/8: no misalignment found for any table height value between 60 and 500 pixels. However, in the table config panel there is no horizontal scrollbar, and the content of the last column is not entirely visible.
              • IE9, IE11: there is a very slight, barely visible misalignment in the table config panel. Not sure if this is acceptable.
              • IE10: there is misalignment in table config panel for any table height value, as in the already attached screen shot.
              Show
              Carmen Cristurean added a comment - Tested with EE-3.3.0-maintenance branch rev.41218/ IF4 trunk rev.41215: no issues found in Firefox29, Chrome35. IE7/8: no misalignment found for any table height value between 60 and 500 pixels. However, in the table config panel there is no horizontal scrollbar, and the content of the last column is not entirely visible. IE9, IE11: there is a very slight, barely visible misalignment in the table config panel. Not sure if this is acceptable. IE10: there is misalignment in table config panel for any table height value, as in the already attached screen shot.
              Ken Fyten made changes -
              Security Private [ 10001 ]
              Fix Version/s 4.0 [ 11382 ]
              Affects Version/s EE-3.3.0.GA_P01 [ 11174 ]
              Affects Version/s EE-3.3.0.GA_P02 [ 11371 ]
              Hide
              Permalink
              Ken Fyten added a comment -

              Re-opened for remaining IE10 issue.

              Show
              Ken Fyten added a comment - Re-opened for remaining IE10 issue.
              Ken Fyten made changes -
              Resolution Fixed [ 1 ]
              Status Resolved [ 5 ] Reopened [ 4 ]
              Ken Fyten made changes -
              Summary showcase - ace:dataTable Scrolling demo columns misalignment in config panel showcase - ace:dataTable Scrolling demo columns misalignment in config panel (IE10)
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #41275 Mon Jun 02 17:40:49 MDT 2014 art.zambrano ICE-10041 increased width of table inside the dialog, in order to prevent misalignments in IE10
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/dataTable/dataTableScrolling.xhtml
              Hide
              Permalink
              Arturo Zambrano added a comment -

              As for the last issue, related to IE10, it seems to be a specific behaviour/feature of the browser: when the container width is too small to display the entire width of a scrollable table (or any scrollable container), then the (vertical) scrollbar is placed inside the inner width of the table to save some space, but this messes with our alignment calculations. If the outer container is wide enough, then the scrollbar is displayed outside the inner width of the table, as all other browsers do. It's not possible to determine if the scrollbar is inside or outside of the container, and the threshold to display the scrollbar inside is not very precise. There's not much we can do about this particular browser behaviour but to simply increase the width of the outer container, in this case the ace:dialog. Committed this modification to the ace:dataTable Scrolling demo in the showcase to the 4.0 trunk at revision 41275, to the 3.3 EE maintenance branch at revision 41276 and to the P02 tag at revision 41277.

              Show
              Arturo Zambrano added a comment - As for the last issue, related to IE10, it seems to be a specific behaviour/feature of the browser: when the container width is too small to display the entire width of a scrollable table (or any scrollable container), then the (vertical) scrollbar is placed inside the inner width of the table to save some space, but this messes with our alignment calculations. If the outer container is wide enough, then the scrollbar is displayed outside the inner width of the table, as all other browsers do. It's not possible to determine if the scrollbar is inside or outside of the container, and the threshold to display the scrollbar inside is not very precise. There's not much we can do about this particular browser behaviour but to simply increase the width of the outer container, in this case the ace:dialog. Committed this modification to the ace:dataTable Scrolling demo in the showcase to the 4.0 trunk at revision 41275, to the 3.3 EE maintenance branch at revision 41276 and to the P02 tag at revision 41277.
              Arturo Zambrano made changes -
              Status Reopened [ 4 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Hide
              Permalink
              Liana Munroe added a comment -

              Confirmed Tomcat 7, IE 9,10, 11.
              Icefaces 4 trunk, ee-maintenance branch r41304 and icefaces-ee-3.3.0.GA_P02 tag r41311.

              Show
              Liana Munroe added a comment - Confirmed Tomcat 7, IE 9,10, 11. Icefaces 4 trunk, ee-maintenance branch r41304 and icefaces-ee-3.3.0.GA_P02 tag r41311.
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: