Whitespace between table and vertical scrollbar in IE6 and IE7

R3P1N5

Hi, firstly, very impressed by this product, it is tremendously promising for a wide variety of uses. Secondly, I have a problem :/

When I generate a table in IE6, there is a space between the table and the vertical scroll bar.

http://dl.dropbox.com/u/1079661/table%20whitespace%20scrollbar%20gap.PNG

Edit: You can't see it, but when the table is selected in the browser, it also shows that the table's body and head are not completely filling the scroll_body and scroll_head divs. Here's a screenshot of the table highlighted http://dl.dropbox.com/u/1079661/table%20whitespace%20scrollbar%20gap_02.PNG.

No matter what I try and do, I am unable to get rid of the gaps.

I am using the latest nightly build (1.9.1), and it does not appear in firefox, in chrome or in IE 8 or 9

The css file is the default jquery.datatables.css file in the /media/css directory

The code for my table (pre-datatables) and the function look like this. (however any database referances and coldfusion code have been removed)

[code]




Code
Description
Description




testtest
testtest
testtesttesttesttesttesttesttesttest test test test test


testtest
testtest
testtesttesttesttesttesttesttesttest test test test test


testtest
testtest
testtesttesttesttesttesttesttesttest test test test test


testtest
testtest
testtesttesttesttesttesttesttesttest test test test test


testtest
testtest
testtesttesttesttesttesttesttesttest test test test test





$(document).ready(function() {
$('#table1').dataTable( {
"bAutoWidth": false,
"bPaginate": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"sScrollY": "200px"
} );
} );

[/code]

Any help or suggestions would be greatly appreciated. Thank you!

allan

Hi - Thanks very much for posting the code you are using to reproduce this. I'm afraid I can't look at this right now, but I will do so at the start of the week and see what I can do to address this before 1.9.1 is released next week.

Regards,
Allan

R3P1N5

Today when attempting to reproduce the problem, I can't. I'll let you know if I find something more difinitive (and sorry if I've wasted any of your time)

R3P1N5

I found what was causing the problem for me.

In jquery.datatables.js (1.9.1) I found that if I changed (starting at line 3123)

[code]
/* I know this is rubbish - but IE7 will make the width of the table when 100% include
* the scrollbar - which is shouldn't. When there is a scrollbar we need to take this
* into account.
*/
if ( ie67 && ($('tbody', nScrollBody).height() > nScrollBody.offsetHeight ||
$(nScrollBody).css('overflow-y') == "scroll") )
{
o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth() - o.oScroll.iBarWidth);
}
[/code]

into

[code]
/* I know this is rubbish - but IE7 will make the width of the table when 100% include
* the scrollbar - which is shouldn't. When there is a scrollbar we need to take this
* into account.
*/
if ( ie67 && ($('tbody', nScrollBody).height() > nScrollBody.offsetHeight ||
$(nScrollBody).css('overflow-y') == "scroll") )
{
o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth());
}
[/code]

^the important part being
" - o.oScroll.iBarWidth" removed

It removed the white space issue I was having.

Edit: It only seems to fix it on the pages I'm working with, it breaks the example I provided in the original post.

allan

If you could link to a page which is showing the issue in 1.9.1.dev (the current nightly) that would be really useful so I can investigate this.

Thanks,
Allan

R3P1N5

I'll see if I can reproduce the error after I've stripped my company's data from the page in some spare time today.

allan

I've managed to reproduce this error myself - I think it is related to border-collapse:collapse; on the table. Basically with this set it would appear to be impossible to set a row height to 0 in IE6/7 :-(. The only solution is to use a CSS solution such as:

[code]
div.dataTables_wrapper table {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
div.dataTables_wrapper table th,
div.dataTables_wrapper table td {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: none;
padding: 5px;
}
div.dataTables_wrapper div.dataTables_scrollHead table {
border-bottom: none;
}
[/code]

and removing the border-collapse:collapse option from the table CSS.

Allan

R3P1N5

Thanks for the help, glad (sort of) that it wasn't just me.