ICEfaces
  1. ICEfaces
  2. ICE-9674

ace:dataTable > When expanding/contracting rows, the header columns misalign temporarily

    Details

    • Assignee Priority:
      P2

      Description

      When expanding/contracting rows, the header columns misalign temporarily then snap back to proper alignment. This is more visible on IE browsers.

        Issue Links

          Activity

          Hide
          Arturo Zambrano added a comment -

          The cause of this issue is the fact that the entire table markup is updated/replaced by a newly-rendered table. The temporary misalignment and snap back is simply caused by rendering all the nodes by the browser. It only seems to happen on slow browsers like IE. If you observe carefully, when you first load the grouping and multi row header demos you can notice the same temporary misalignment in the header.

          The reasons why the entire table is updated when expanding/contracting rows could be that the row expansions don't have client ids and the corresponding <tr> elements are "inserted" in the original markup. So, a possible solution to this issue could be to always render the expanded rows with a client id, with style="display:none;", and with no content inside of them. Then, when a row is actually expanded, only such <tr> element would be updated, removing the "display:none;" and adding the content inside of it, thus avoiding a full table update.

          Show
          Arturo Zambrano added a comment - The cause of this issue is the fact that the entire table markup is updated/replaced by a newly-rendered table. The temporary misalignment and snap back is simply caused by rendering all the nodes by the browser. It only seems to happen on slow browsers like IE. If you observe carefully, when you first load the grouping and multi row header demos you can notice the same temporary misalignment in the header. The reasons why the entire table is updated when expanding/contracting rows could be that the row expansions don't have client ids and the corresponding <tr> elements are "inserted" in the original markup. So, a possible solution to this issue could be to always render the expanded rows with a client id, with style="display:none;", and with no content inside of them. Then, when a row is actually expanded, only such <tr> element would be updated, removing the "display:none;" and adding the content inside of it, thus avoiding a full table update.
          Hide
          Arturo Zambrano added a comment -

          r38727:
          Added tr placeholders with client ids for row/panel expansions at the first level of the table, in order to avoid full table updates when contracting/expanding rows.

          Show
          Arturo Zambrano added a comment - r38727: Added tr placeholders with client ids for row/panel expansions at the first level of the table, in order to avoid full table updates when contracting/expanding rows.
          Hide
          Arturo Zambrano added a comment -

          Committed final fix at revision 38789. Now, all the <tr> elements corresponding to all child row levels and panel expansions are going to be rendered with their client ids and initially hidden, so that when rows are expanded/contracted only <tr> elements will be updated instead of the entire table.

          Show
          Arturo Zambrano added a comment - Committed final fix at revision 38789. Now, all the <tr> elements corresponding to all child row levels and panel expansions are going to be rendered with their client ids and initially hidden, so that when rows are expanded/contracted only <tr> elements will be updated instead of the entire table.
          Hide
          Arturo Zambrano added a comment -

          Committed fix to 3.3 EE branch at revision 38825.

          Show
          Arturo Zambrano added a comment - Committed fix to 3.3 EE branch at revision 38825.
          Hide
          Liana Munroe added a comment -

          Confirmed fixed on maintenance branch, revision 38865, Chrome 30, IE 7,9,10. However in IE 8 and FF 3.6, upon launching the application, the columns are misaligned and the following error appears:
          Message: 'console' is undefined
          Line: 476
          Char: 26389
          Code: 0
          URI: http://10.18.39.102:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb
          See attached screenshot for misalignment issue.

          In FF21 the following console error appears when collapsing rows:
          [window] Error [status: malformedXML code: 200]: During update: form:carTable_exp_15 not found
          http://localhost:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb
          Line 1

          Show
          Liana Munroe added a comment - Confirmed fixed on maintenance branch, revision 38865, Chrome 30, IE 7,9,10. However in IE 8 and FF 3.6, upon launching the application, the columns are misaligned and the following error appears: Message: 'console' is undefined Line: 476 Char: 26389 Code: 0 URI: http://10.18.39.102:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb See attached screenshot for misalignment issue. In FF21 the following console error appears when collapsing rows: [window] Error [status: malformedXML code: 200] : During update: form:carTable_exp_15 not found http://localhost:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb Line 1
          Hide
          Carmen Cristurean added a comment - - edited

          Re-tested showcase > Grouping with EE-3.3.0-maintenance branch rev# 39069, and no header-columns misalignments have been observed in FF25, Chrome30, IE7/8/10.

          The "malformedXML code 200" console error could not be reproduced in any browser.

          The "'console' is undefined" JS error and the columns misalignment have been reproduced only in FF3.6, but not in IE8/Document Mode IE8 standard.

          In IE8/Document Mode IE7 Standards, and also in IE10/Document Mode IE7/IE8 Standards a JS error occurred in browser console and as a popup (not an issue in IE7):
          Object doesn't support this property or method coalesced.js.jsf?ln=ice.core&dgst=zg6ihb, line 442 character 9082

          Show
          Carmen Cristurean added a comment - - edited Re-tested showcase > Grouping with EE-3.3.0-maintenance branch rev# 39069, and no header-columns misalignments have been observed in FF25, Chrome30, IE7/8/10. The "malformedXML code 200" console error could not be reproduced in any browser. The "'console' is undefined" JS error and the columns misalignment have been reproduced only in FF3.6, but not in IE8/Document Mode IE8 standard. In IE8/Document Mode IE7 Standards, and also in IE10/Document Mode IE7/IE8 Standards a JS error occurred in browser console and as a popup (not an issue in IE7): Object doesn't support this property or method coalesced.js.jsf?ln=ice.core&dgst=zg6ihb, line 442 character 9082
          Hide
          Liana Munroe added a comment -

          JS error issue is found in IE 7 and 8, and FF 3.6. DataTable/TablePanelConfigAjax throws error upon load in these browsers with Tomcat 6 or 7.

          FF:
          Error: console is not defined
          Source File: http://localhost:8080/dataTable/javax.faces.resource/util/ace-datatable.js.jsf?ln=icefaces.ace&v=3_3_0_131210
          Line: 1

          IE:
          Message: 'console' is undefined
          Line: 1
          Char: 26389
          Code: 0
          URI: http://localhost:8080/dataTable/javax.faces.resource/util/ace-datatable.js.jsf?ln=icefaces.ace&v=3_3_0_131210

          Show
          Liana Munroe added a comment - JS error issue is found in IE 7 and 8, and FF 3.6. DataTable/TablePanelConfigAjax throws error upon load in these browsers with Tomcat 6 or 7. FF: Error: console is not defined Source File: http://localhost:8080/dataTable/javax.faces.resource/util/ace-datatable.js.jsf?ln=icefaces.ace&v=3_3_0_131210 Line: 1 IE: Message: 'console' is undefined Line: 1 Char: 26389 Code: 0 URI: http://localhost:8080/dataTable/javax.faces.resource/util/ace-datatable.js.jsf?ln=icefaces.ace&v=3_3_0_131210
          Hide
          Carmen Cristurean added a comment -

          Testing with with EE-3.3.0.GA-maintenance rev 39472 (with updated Mojarra 2.1.26 JSF), no JS errors were found in IE7, but the same JS error were reproduced in IE8/Document Mode IE8 Standards and IE8/Document Mode IE7 Standards.

          IE8/Document Mode IE8 Standards:
          Message: 'console' is undefined
          Line: 476
          Char: 26423
          Code: 0
          URI: http://10.18.39.149:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb

          IE8/Document Mode IE7 Standards:
          SCRIPT438: Object doesn't support property or method 'querySelector'
          coalesced.js.jsf, line 442 character 9341

          Show
          Carmen Cristurean added a comment - Testing with with EE-3.3.0.GA-maintenance rev 39472 (with updated Mojarra 2.1.26 JSF), no JS errors were found in IE7, but the same JS error were reproduced in IE8/Document Mode IE8 Standards and IE8/Document Mode IE7 Standards. IE8/Document Mode IE8 Standards: Message: 'console' is undefined Line: 476 Char: 26423 Code: 0 URI: http://10.18.39.149:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb IE8/Document Mode IE7 Standards: SCRIPT438: Object doesn't support property or method 'querySelector' coalesced.js.jsf, line 442 character 9341
          Hide
          Carmen Cristurean added a comment -

          Re-tested with IF4 trunk rev# 39869 / EE-3.3.0-maintenance-branch rev# 39821 (IE10/FF26/Chrome32/IE8 w. DocMode IE7).
          No misalignment issue found with either revisions.
          Using IE8/Document Mode IE7, with EE-3.3.0-maintenance-branch rev# 39821, a similar JS error as from the previous comments was reproduced.

          Show
          Carmen Cristurean added a comment - Re-tested with IF4 trunk rev# 39869 / EE-3.3.0-maintenance-branch rev# 39821 (IE10/FF26/Chrome32/IE8 w. DocMode IE7). No misalignment issue found with either revisions. Using IE8/Document Mode IE7, with EE-3.3.0-maintenance-branch rev# 39821, a similar JS error as from the previous comments was reproduced.
          Hide
          Carmen Cristurean added a comment -

          Marking this as resolved, new JIRA ICE-9829 created for the JS error in IE8/doc mode IE7.

          Show
          Carmen Cristurean added a comment - Marking this as resolved, new JIRA ICE-9829 created for the JS error in IE8/doc mode IE7.

            People

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

              Dates

              • Created:
                Updated:
                Resolved: