Datatables + IE7 - Pagination = Wrong Table Height? (repost from general)
Datatables + IE7 - Pagination = Wrong Table Height? (repost from general)
xDisruptor
Posts: 2Questions: 0Answers: 0
First things first, hats off for datatables - its awesome! I am just having a minor issue with the auto-adjusting of the height of the table under IE7 (it expands past the lower bound of its container div#content no matter what I do). My markup is pretty simple:
[code]
<!DOCTYPE html>
...
[/code]
---------- My initialization code is: -------------
[code]
$('#datatable').dataTable({
"bAutoWidth": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aoColumns": [ "Foo1", "Foo2", "Foo3", "Foo4" ],
"aaData": [
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
... [repeat many many times] ...
[ "Foo1", "Foo2", "Foo3", "Foo4" ]
]
});
});
[/code]
------- And css: --------
[code]
html, body {
height: 100%;
}
body {
background:#f0f0f0;
font-size: 13px;
font-family: "Trebuchet MS", Arial, sans-serif;
color: #525c5f;
overflow: hidden;
}
a { color: #3985b1; text-decoration:none; }
a:visited { color: #3985b1; }
a:hover { color: #3985b1; }
a:focus { outline: 0; }
a:hover, a:active { outline: 0; }
#wholepagecontainer {
border:1px solid #d1d1d1;
position: relative;
height: 90%;
margin: 20px 20px 20px 20px;
}
#content {
margin:0;
padding: 0;
border-top: 1px solid #fcfbfc;
overflow-y: scroll;
overflow-x: scroll;
color: #6d757d;
}
#datatable th {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 15px;
color: #525c5f;
color: #fff;
height: 28px;
border-left: 1px solid #3b8eb3;
border-right: 1px solid #0b6891;
border-top: 1px solid #0a4b67;
border-bottom: 1px solid #0a4b67;
cursor: pointer;
}
[/code]
------------------------------------
I've tested this with datatables versions 1.8.x, 1.9.1 and the latest nightly. Jquery version 1.7.2. This issue doesnt occur under IE8 and IE9. It also disappears under IE7 only if I instruct IE9 to behave as IE7 in Quirks Mode (using the developer tools). Any ideas as to what might be causing the problem? Any help appreciated. Thanks in advance.
- Dominick
[code]
<!DOCTYPE html>
...
[/code]
---------- My initialization code is: -------------
[code]
$('#datatable').dataTable({
"bAutoWidth": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aoColumns": [ "Foo1", "Foo2", "Foo3", "Foo4" ],
"aaData": [
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
... [repeat many many times] ...
[ "Foo1", "Foo2", "Foo3", "Foo4" ]
]
});
});
[/code]
------- And css: --------
[code]
html, body {
height: 100%;
}
body {
background:#f0f0f0;
font-size: 13px;
font-family: "Trebuchet MS", Arial, sans-serif;
color: #525c5f;
overflow: hidden;
}
a { color: #3985b1; text-decoration:none; }
a:visited { color: #3985b1; }
a:hover { color: #3985b1; }
a:focus { outline: 0; }
a:hover, a:active { outline: 0; }
#wholepagecontainer {
border:1px solid #d1d1d1;
position: relative;
height: 90%;
margin: 20px 20px 20px 20px;
}
#content {
margin:0;
padding: 0;
border-top: 1px solid #fcfbfc;
overflow-y: scroll;
overflow-x: scroll;
color: #6d757d;
}
#datatable th {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 15px;
color: #525c5f;
color: #fff;
height: 28px;
border-left: 1px solid #3b8eb3;
border-right: 1px solid #0b6891;
border-top: 1px solid #0a4b67;
border-bottom: 1px solid #0a4b67;
cursor: pointer;
}
[/code]
------------------------------------
I've tested this with datatables versions 1.8.x, 1.9.1 and the latest nightly. Jquery version 1.7.2. This issue doesnt occur under IE8 and IE9. It also disappears under IE7 only if I instruct IE9 to behave as IE7 in Quirks Mode (using the developer tools). Any ideas as to what might be causing the problem? Any help appreciated. Thanks in advance.
- Dominick
This discussion has been closed.