[ICE-9674] ace:dataTable > When expanding/contracting rows, the header columns misalign temporarily - ICEsoft JIRA Issue Tracker

Details

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

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.

Options
- Sort By Name
- Sort By Date
- Ascending
- Descending
- Download All

Attachments

Grouping.PNG

22 kB

25/Nov/13 1:25 PM

Issue Links

depends on

ICE-9532 ace:dataTable - Improve dynamic stylesheet performance by using cssText instead of insertRule

Closed

Activity

Descending order - Click to sort in ascending order

Hide

Permalink

Carmen Cristurean added a comment - 11/Feb/14 3:04 PM

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

Show

Carmen Cristurean added a comment - 11/Feb/14 3:04 PM Marking this as resolved, new JIRA ICE-9829 created for the JS error in IE8/doc mode IE7.

Hide

Permalink

Carmen Cristurean added a comment - 31/Jan/14 4:51 PM

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 - 31/Jan/14 4:51 PM 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

Permalink

Carmen Cristurean added a comment - 23/Dec/13 11:55 AM

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 - 23/Dec/13 11:55 AM 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

Permalink

Liana Munroe added a comment - 10/Dec/13 11:17 AM

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 - 10/Dec/13 11:17 AM 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

Permalink

Carmen Cristurean added a comment - 02/Dec/13 12:12 PM - 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 - 02/Dec/13 12:12 PM - 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

4 older comments

Hide

Permalink

Arturo Zambrano added a comment - 05/Nov/13 2:29 PM

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 - 05/Nov/13 2:29 PM 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.

People

Assignee:

Arturo Zambrano

Reporter:

Arturo Zambrano

Votes:

0 Vote for this issue

Watchers:

4 Start watching this issue

Dates

Created:

05/Nov/13 2:28 PM

Updated:

14/Nov/14 5:18 PM

Resolved:

11/Feb/14 3:04 PM