Layout of 2 side-by-side columns w/ scrolling doesn't apply styles in IE

jaylaw

I am total datatables newbie, but a programmer of 30 years. My apologies in advance if this is naive. I am using datatables 1.9 downloaded on Monday of this week.

I've built a package that create pivot tables using datatables to display them and allow end user sorting, filtering etc. Works great, saved me man-years of work. However ...

Some of these tables are small, so I would like tables laid out in multiple columns across the page. I want them to only occupy a small space, so I've limited the height of the enclosing and enabled scrolling. I have done the recompute on resize as you'll see below.

This works beautifully in Chrome and Safari, but not in IE 8. This may be just an IE8 bug and no issue to the datatables maintainers, but it is effected by the presence of Srolling and pagination.

I have no easy way to post a live site external to my corporate environment so I'll include the document below. The behavior I get in IE is that the "left" table recieves no styling, and the "right" table has misaligned column headers.

I have just used the default demo style sheet for now. Those styles are not included here, instead a is included to where it is located on my internal site. you'll have to modify this link to point to some copy of that css.

The only styles here are the ones that create the two columns by creating a with relative positioning, containing 2 with absolute positioning. I've also tried "float" left/right followed by "clear" and other permutations that had no effect.

To get the tables to work properly, i've found 2 things I can remove from this document:

1) comment out the 3 styles I've included in so the tables display under each other. This works, but takes up way more space than these tables need. The purpose of these reports is quick summary so having them all visible is desirable.

2) Remove the "sScrollY:300px" and "bPaginate":false attributes when creating the tables. This gives paginated tables and they lay out nicely, but again, folks will just want to quickly scroll to peruse these.

My apologies if this is just IE 8 being braindead w.r.t. css interpretations, but I'm hopeful someone can give me a permutation that works here.

Thanks in advance.

Here is the code. Sorry the tables are not more abbreviated, I need enough data in them that they actually scroll.

[code]







/*




To eliminate 2 column layout start a comment below this line



*/
#twoDColumns {
position : relative;
height : 400px;
width : 600px
}

#div_mgrTwoD {
position : absolute;
top : 0;
right : 0;
width : 200px;
}

#div_acctTwoD {
position : absolute;
top : 0;
left : 0;
width : 200px;
}

/*




To eliminate 2 column layout end a comment above this line



*/












BEQ
010101


Manager0171811
Manager021941075
Manager0321
Manager041
Manager051
Manager061112
Manager077461931
Manager0811
Manager0953111
Manager101
Manager11322
Manager123129611
Manager13331831
Manager14511
Manager153221
Manager1611



$(document).ready( function () {
/*
* Comment out sScrollY and bPaginate to get nice little tables
* do it for both tables
*/
omgrPivotTable = $('#mgrPivot').dataTable({
"sScrollY" : "300px",
"bPaginate" : false,
"bFilter" : false
} );
$(window).resize( function (){
omgrPivotTable.fnAdjustColumnSizing();
} );
});







B
E
Q



0
1
0
1
0
1



Acct011

Acct02233
Acct0322311
Acct041
Acct05363
Acct06111
Acct072
Acct08722161
Acct091
Acct101
Acct111
Acct12131
Acct13121931
Acct1424
Acct151
Acct1611


$(document).ready( function () {
oacctPivotTable = $('#acctPivot').dataTable({
/*
* Comment out sScrollY and bPaginate to get nice little tables
* do it for both tables
*/
"sScrollY" : "300px",
"bPaginate" : false,
"bFilter" : false
} );
$(window).resize( function (){
oacctPivotTable.fnAdjustColumnSizing();
} );
});






[/code]

jaylaw

OK, after 6 hours of sleep I got up the nerve to fire up the Developer Tools in IE.

My problem is layered. The immediate problem is that the styling aborts with the message

'console is undefined'

This is related to post:
http://datatables.net/forums/discussion/8436/1.9.0-ie9-bug-console-is-undefined#Item_1

From a couple of days ago. It says IE9, I'm in IE8.

Ironically, whatever this 'console' variable is, it is defined when running with Developer Tools and my webpage displays beautifully in 2 columns. If I run the page, stop debugging and load it again (without killing the developer tools window) console is defined.

In that mode the second layer is that a message "The tabel connot fit int othe current element which was the current element will cause column misalignment. The table has been drawn at it miminum possible width"

So somewhere above here the calculation of width must be funny because these tables easily fit.

I'll try the workaround in that post and work up the stack.

jaylaw

After patching the jquery.datatables.js, styling was much better. the console message was aborting the script and so partially styled stuff was laying around. I then had to make some changes (getting rid of 'clear:both' in the demo_table.css. Now it looks beautiful....