Styling Options with Bootstrap framework

Karl53

Are the DataTables styling options expected to work with the Bootstrap framework?

Specifically, I'm not able to get the align right option to work for either the cells or the header.

I've added dt-right as a class:

"columnDefs": [
    { className: "dt-right", "targets": [ 0, 1, 2, 3, 4, 5, 6 ] }
  ]

I've also tried adding dt-right as a class to individual columns in the columns array.

allan

Are the DataTables styling options expected to work with the Bootstrap framework?

No - Bootstrap provides its own alignment options.

Allan

Karl53

Thanks Allan. Wasn't sure if I should be using the Bootstrap classes or the DataTable classes.

I had a problem because in dataTables.bootstrap.css, there is this rule:

table.dataTable.table-condensed > thead > tr > th {
  padding-right: 20px;
}

This breaks the Bootstrap text-right class, or it did in my case. But I have it resolved now.

allan

Out of interest, what did you do to resolve it? That class is there to allow spacing for the sorting icon.

Allan

rogera

I also had an issue with the padding-rigt on condensed tables and using Bootstrap.
I had asked a question but not get an answer. I've changed my version of dataTables.bootstrap.css to just do this padding-right when sorting is on.

See http://datatables.net/forums/discussion/31577/bootstrap-too-wide-right-padding-in-header#latest for my (unanswered) question.

Karl53

I was wondering why the padding was there. In my case, the user can't sort right aligned columns, so I commented out the rule. A brute force solution I know, but that's all I required.

allan

That would work nicely :-)

Allan