Integration with fixed-fluid Bootstrap layout

int

I am attempting to modify the Bootstrap integration (http://datatables.net/blog/Twitter_Bootstrap_2) to work with a fixed-fluid layout, but have encountered a weird issue where the row-fluid class I'm using in sDom is being set as high as the left menu it's floating next to.

Visual here: http://jsfiddle.net/VKkWH/1/show/
Code here: http://jsfiddle.net/VKkWH/1

I'm using the original DT_bootstrap.js with one exception: I replaced 'row' in sDom with 'row-fluid'.

I'm using the original DT_bootstrap.css file minus 'clear: both;' on table.table.

If you go to the show page, take a look at: $($('.row-fluid')[1]) and you can see its height extending beyond the left menu. $($('.row-fluid')[1]).css('height', '50px') sort of fixes it, at least showing you close to what it should look like.

Any ideas why that row is being set so high?

allan

Bootstrap has this in the CSS:

[code]
.row-fluid:after {
clear: both;
}
[/code]

So the row before the table is being instructed to clear left and right, which means bumping the table down to the bottom of the containers.

I'd say that fix needed is to wrap the table into a container before the table is initialised (i.e. in the HTML).

Allan