DOM-CSS Issue on dataTable height (not width) ?

Christian Bonato

Hi Allan & everyone,


I searched in the Forums but found nothing about my issue...
Maybe you can help me out.


Made a short video (1:30) for you guys :
http://bonatoc.free.fr/DATATABLES_BUG_-_VIDEO_FOR_FORUMS.mov

1 - Once page has loaded — notice the right-hand scrollbars ?
2 - Let's scroll down — Uh oh, where's the rest of my rows ?
3 - Let's resize the window...
4 - ...now body takes dataTable height into account.


Okay, I put a LOT of html in each row. But this only shows how great DataTables is.
As you can see in the video, FF behaves as expected.
It seems to be a WebKit problem. And more CSS-related than dataTables related...


What you should know :

1 - I'm using Jquery UI Tabs, but no issue related here, all dataTables are initialized/displayed as expected for each tab.
2 - The dataTables are populated on page load through a generated PHP array, using aaData.
So no html (like "...") is present in the body for the table graphical representation.
3 - The main CSS layout structure is 3 col, one fixed column in the center and two elastic surrounding it (infinite background CSS trick).

[code]
/* DATATABLES INTIALIZATION */

$('#active_dynamic').html( '' );

oTable = $('#active').dataTable(
{
"oLanguage": {"sUrl": "<? echo clean_path; ?>includes/javascripts/jquery/plugins/dataTables_1_7/media/language/advertisers/<? echo(img_folder."_".strtoupper(img_folder)); ?>.txt"},
"bAutoWidth": false,
"bLengthChange": false,
"iDisplayLength": 10,
"bStateSave": false,
"aaSorting": [[0,'asc']],
"sDom": 'fpitpi',
"fnDrawCallback": function() {
$(".example5").colorbox({width:"760", height:"552", iframe:true});
},
"aaData": [
<?
$ffcatotal = count($franchisecustomercompaniesarray);
$counter = 1;
if ($ffcatotal > 0)
{
... /* FETCHING THE PHP ARRAY TO PRODUCE ROWS */

/* -------- EOF - DATATABLES INTIALIZATION */


/* CSS */

html {
height: 100%;
min-height: 100%;
}

body {
display: table;
padding: 0;
margin: 0;
width: 100%;
min-height: 100%;
height: 100%;
overflow: auto;

background: #aaddf8 url(../g/bkg/main_bkg_center_background.gif) repeat-y center top;
text-align: center;
font: 12px 'Lucida Grande', Tahoma, Helvetica, sans-serif;
color: #333;
}

#main_bkg_div {
height: 864px;
z-index: -1;
background: url(../g/bkg/bkg_cloud_center.jpg) no-repeat center top;
margin: auto;
top: 0;
}

#main_bkg_floating_div {
width: 997px;
margin: auto;
position: relative;
min-height: 100%;
height: 100%;
}
/* -------- EOF - CSS */



/* HTML */




...
[all elements, including dataTables and JQuery UI Tabs]
...




/* --------- EOF - HTML */
[/code]



My guess is this comes from the particular CSS main structure.
or maybe the JQuery UI tabs CSS ? But if so, would FF work ?
Any idea what I could change/hack so WebKit behaves as FF does ?


Thanks in advance for any help.

Best regards,
Christian

allan

My guess is that it is this in your CSS:

[code]
html {
    height: 100%;
    min-height: 100%;
}
 
body {
    min-height: 100%;
    height: 100%;
}
[/code]

You are forcing the window to 100% height of the window - not the document. Try removing that and see how it goes.

Allan

Christian Bonato

Hi Allan,

Thanks for your response.

Unfortunately the behavior is the same, even with the heights commented out.
I would like to try a hack. Do you think it could work if I force the redrawing of the dataTable once the page has loaded ? How does one do that ?

Christian

allan

You could do a redraw with fnDraw but I'm reasonably certain that its a CSS problem. Try removing all of the CSS that you've got above and then selectively adding parts back in and see if that helps.

Allan