clear: both; CSS attributes on .dataTable_wrapper and .ui-helper-clearfix:after

growse

I've got a table that I'm using within a jQuery-ui styled site. It's a two-column layout model with a fixed-width floated column on the right hand side. The issue I'm having is that the clear: both; CSS attribute on the .dataTable_wrapper class and the .ui-helper-clearfix:after class (part of the jQuery ui stylesheet) are causing the table in the main content column to start below where the right hand column finishes. This is obvious, because the table is told to clear all floated elements, and the right hand column is floated.

Are there any obvious solutions to this? I currently have pages with a title followed by a huge gap until the datatable. I've got a slightly hacked together solution that involves putting the filter box on the left, and then setting clear: left on the wrapper as well as clear: left in .ui-helper-clearfix:after. I can't help think that this will break other bits of the site that rely on that jquery helper class.

Table options are:
[code]
jQuery('#memberslist').dataTable({
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bInfo": true,
"bProcessing": false,
"aoColumns": [
{ "bSortable": true },
{ "sType": "html" },
{ "bSortable": true },
{ "bSortable": false },
{ "bSortable": true, "sType":"num-html" },
{ "bSortable": true, "sType":"num-html" },
{ "bSortable": true, "sType":"numeric" }
]
}
[/code]

allan

Hi growse,

I think the solution is to find out what class / property is causing the issue, and then simply to remove it. If you use Firebug (or whatever) to disable the clear on dataTable_wrapper for example, does that fix the problem? Also you can specify your own classes etc for what will be used by DataTables using http://datatables.net/usage/options#sDom .

Regards,
Allan

growse

I think the clear on the .dataTable_wrapper is required to make the table render properly, regardless of what the class is called. Removing that clear gives me a table that starts where it should, but the header stretches the whole height of the page until the actual data rows, which start clearing the floated right div.

I think the issue is that the div which is created by datatables for the header has the class 'ui-helper-clearfix'. The CSS in the jquery-ui stylesheet states that any element after this class must clear both, hence the data rows starting after the float, regardless of what the wrapper sets.

allan

When jQuery UI is used with DataTables the sDom property is set to be: '<"H"lfr>t<"F"ip>'. This is the same as:

[code]
'<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"'+
lfr>t<"'+
'"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"'+
'ip>';
[/code]
(the H and F are expanded to the jQuery UI classes basically). So what you could do is just alter the above code to remove the clearfix that you don't want.

Regards,
Allan

growse

Thanks, this seems to have done the trick. There's an intermittant rendering bug on firefox where the table rows render past the end of the header/footer when the ui-helper-clearfix is replaced with a similar class that sets clear:left instead of clear:both on the :after CSS selector. Not an issue on other browsers though...

Screenshot: http://img22.yfrog.com/i/tableerror.png/

allan

Slightly odd. If you set an absolute width on the table, does that fix it? Or set bAutoWidth:false.

Allan