DataTables & Bootstrap 3

JanuszJasinski

Hi,

I managed to get the example from http://datatables.net/blog/Twitter_Bootstrap_2 working for Bootstrap 3. However when I have more than 9 columns, the columns don't match up with the columns.

[code]


Engine
Browser
Platform(s)
Engine version
CSS grade
Blah
Blah
Blah
Blah




Trident
Internet Explorer 4.0
Win 95+
4
X
-
-
-
-



[/code]

That sits within the [code][/code] on the template. 9 columns, it's fine. Any clues?

Thanks,

JJ

JanuszJasinski

It seems to happen when using [code]/* Table initialisation */
$(document).ready(function() {
$('#view').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"sScrollX": "100%",
"bScrollCollapse": true,
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}

});
} );[/code]

Specifically [code]"sScrollX": "100%",[/code]

Is there a quick fix at all?

allan

Can you link to a test case showing the problem please.

Allan

drakej

I'm having similar problems, unfortunately I can't link an example given the nature of the data and site (internal to my company) but I'll see if I can get an example up that mirrors the problem.

drakej

It seems the source of the misalignment with respect to Bootstrap 3 is due to their CSS modifying the box model. Particularly:

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

The initial value is normaly "content-box" not "border-box". This change in bootstrap appears to break the width calculations that DataTables does. This becomes even more obvious when you turn on horizontal scrolling. I'm actually a little bit disappointed in Bootstrap on this one given they apply this to the entire DOM so I'm sure DataTables won't be the only plugin or library that breaks in version 3.

drakej

You can apply this CSS to override the bootstrap global selectors for dataTables:

div.dataTables_wrapper,
div.dataTables_wrapper *,
div.dataTables_wrapper *:before,
div.dataTables_wrapper *:after {
-moz-box-sizing: content-box;
box-sizing: content-box;
}

This should be added to the CSS that was used in the blog to help style the table correctly initially. Hopefully allan can publish another blog entry for Bootstrap 3 after he gets an example working.

allan

Interesting - thanks for posting that.

The integration code I have for Bootstrap 3 thus far is here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3 .

I'm not aware of any issues other than the input elements not being styled like Bootstrap elements (as it requires a class on the elements, which DataTables currently doesn't provide - it will soon for this reason).

Beyond that, any link to a test case showing a problem would be very warmly welcomed so I can fix it.

Allan

drakej

I ran into a small issue with the pagination functionality turned on (initially I was testing with it it off). So I changed the CSS to target div.dataTables_scroll. I only ran into alignment issues when scrolling was turned on so I think that this should handle all scenarios if you apply the "sDom" override similar to the Bootstrap 2 example. Mine is:

"sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",

Then my new CSS is:

div.dataTables_scroll,
div.dataTables_scroll *,
div.dataTables_scroll *:before,
div.dataTables_scroll *:after {
-moz-box-sizing: content-box;
box-sizing: content-box;
}

I tested with both horizontal and vertical scrolling as well as with pagination on and off. This gets things working in Chrome and IE10 (didn't test older versions). Then the only remaining glitch I saw was in Firefox when you have vertical scrolling turned on. It has an off by one issue do to how Bootstrap 3 does it's table borders with the "table-bordered" class. They adjust the default browser setting "border-collapse" from separate to collapse. This required a lot of additional CSS tweaks which are here if anyone is interested. Took a lot of work but it seems to be working smoothly for me now. I'll keep hanging around this thread for help as well. There also might be a way to optimize this CSS but I haven't had the time yet.

.table-bordered {
border-collapse: separate;
border: none;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 0px;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: none;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}

.table-bordered > thead > tr > th:first-child,
.table-bordered > tbody > tr > th:first-child,
.table-bordered > tfoot > tr > th:first-child,
.table-bordered > thead > tr > td:first-child,
.table-bordered > tbody > tr > td:first-child,
.table-bordered > tfoot > tr > td:first-child {
border-left: 1px solid #DDDDDD;
}

.table-bordered > thead:first-child > tr:first-child > th,
.table-bordered > tbody:first-child > tr:first-child > th,
.table-bordered > tfoot:first-child > tr:first-child > th,
.table-bordered > thead:first-child > tr:first-child > td,
.table-bordered > tbody:first-child > tr:first-child > td,
.table-bordered > tfoot:first-child > tr:first-child > td {
border-top: 1px solid #DDDDDD;
}