IE rendering issue with dynamically added table rows. Columns misaligned. JsFiddle repro.
IE rendering issue with dynamically added table rows. Columns misaligned. JsFiddle repro.
dmTech04
Posts: 3Questions: 0Answers: 0
I have an issue where if I dynamically add table rows using knockout, IE randomly renders one row with some columns offset 1 to the right. It's sometimes the last row, sometimes somewhere in the middle. It happens on IE8 & IE9 (both in their respective standards mode), but works fine on other browsers.
Hard to explain exactly in words what it looks like, but I put a repro up here:
http://jsfiddle.net/DUSDL/4/
To see the problem:
1. Run the jsfiddle.
2. Scroll all the way to the right of the table. Notice that there is whitespace after the last column, "Description 10".
3. With that space visible, scroll down until you see a value in the whitespace.
4. Scroll back left and notice that the columns are misaligned in the Datatable - one column is offset one to the right. Sometimes its the first column, sometimes its a middle column.
This is using Datatables 1.9.4, knockout 2.1.0, jQuery 1.8.2.
I'm assuming this is an IE bug, not datatables.net, but it doesn't happen if I just render with knockout and leave the table as is. Only after applying the dataTable to it.
Does anyone have any ideas on what's happening, or possible workarounds. I've tried doing a fnDraw or fnAdjustColumnSizing after a delay, but those don't seem to have any affect. I assume people have seen something like this before, but I couldn't find a post searching. And it was hard to narrow down a consistent repro, so maybe others weren't able to. This one seems to happen everytime though.
Thanks for any help!
- Keith
Hard to explain exactly in words what it looks like, but I put a repro up here:
http://jsfiddle.net/DUSDL/4/
To see the problem:
1. Run the jsfiddle.
2. Scroll all the way to the right of the table. Notice that there is whitespace after the last column, "Description 10".
3. With that space visible, scroll down until you see a value in the whitespace.
4. Scroll back left and notice that the columns are misaligned in the Datatable - one column is offset one to the right. Sometimes its the first column, sometimes its a middle column.
This is using Datatables 1.9.4, knockout 2.1.0, jQuery 1.8.2.
I'm assuming this is an IE bug, not datatables.net, but it doesn't happen if I just render with knockout and leave the table as is. Only after applying the dataTable to it.
Does anyone have any ideas on what's happening, or possible workarounds. I've tried doing a fnDraw or fnAdjustColumnSizing after a delay, but those don't seem to have any affect. I assume people have seen something like this before, but I couldn't find a post searching. And it was hard to narrow down a consistent repro, so maybe others weren't able to. This one seems to happen everytime though.
Thanks for any help!
- Keith
This discussion has been closed.
Replies
I don't have an IE9 machine to hand atm I'm afraid, but it sounds a lot like the ghost columns issue: http://datatables.net/forums/discussion/5481/bug-ghost-columns-when-generating-large-tables/p1 .
Basically its an IE issue with white space that needs to be stripped :-/. That's the only way we've found to address the problem thus far.
Allan
Allan