Gap between multiple tables

clients

Sorry if this is a duplicate, but I searched and couldn't find anything.

Just starting using datatables and am running into a problem. On one page, i have two grids. Before enabling datatables, the tabes were right on top of eachtoher, now with datatables enabled on both of them, there is a very large and noticible gap between the two tables.

The gap will go away if I dont enable the datatable for the first table. When viewing the source between having the top grid using datatable or not, there is no difference to the content at all so I am not sure why there is a difference in the spacing between the two grids. It almost seems as though it is leaving space for another 10 rows for the first grid, but I have tried playing around with the length and still nothing.

If it makes i differnce, i am using ASP.NET MVC. I have also posted as much of the source as possible of the page in question. Any suggestions


[code]





$(document).ready(function() {
$('#Unassigned').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "10px", "bSortable": false },
{ "sWidth": "180px" },
{ "sWidth": "80px" },
{ "sWidth": "60px" },
{ "sWidth": "100px" },
{ "sWidth": "60px" },
{ "sWidth": "70px" },
{ "sWidth": "140px" },
{ "sWidth": "100px" }
]
});

$('#Assigned').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "180px" },
{ "sWidth": "80px" },
{ "sWidth": "60px" },
{ "sWidth": "100px" },
{ "sWidth": "60px" },
{ "sWidth": "70px" },
{ "sWidth": "140px" },
{ "sWidth": "100px" }
]
});
});


Master Evaluation List






Unassigned
DescriptionQuantityUnitsRateCostStatusReference #DateRepair Waterroon P17700.00Unnassigned



Assigned

DescriptionQuantityUnitsRateCostStatusReference #DateTopside Concrete Repairs5metres sqaured275.001375.00AssignedWO10Trench Drains Reconstruction14500.00AssignedWO10Slab On Grade Sealer2500metres squared6.0015000.00AssignedWO10Replace Floor Drain11500.00AssignedWO12Ashphalt Work1000m210.0010000.00AssignedWO12Roof Work125000.00AssignedWO16Extra Water Proofing1m230000.0030000.00AssignedWO10



[/code]

allan

Hi clients,

Not a duplicate - I don't remember any question like this before! :-)

The gap will (I strongly suspect) be caused by some CSS in my demo stylesheets, or an interaction between your own and DataTables. Best way to find out what is going on is probably to break out Firebug, Webkit's Inspector, IE Dev Tools or whatever takes your fancy (XRay is a good bookmarklet for this kind of thing: http://westciv.com/xray/ ) and have a look at what might be applying white space (padding / margin) and then removing that from the CSS.

If you have a link available, we could take a peak and see what might be happening.

Regards,
Allan

clients

Thanks Allan. I looked everywhere and overlooked the _wrapper class in your demo_table.css

All fixed now. Thanks so much, your plugin is awesome.


Cheers,