Datatables/bootstrap buttons look aweful

jtop

Using the defaults I'm getting malformed styles on the buttons at the bottom of the datatables. I'm not sure, but I've found that the 3.3.7 version of bootstrap pagination class [display: inline] is part of the problem. I'm just using the standard out of the box configuration.

Could there be something I'm doing wrong?

jtop

Here are the versions of libraries that I'm using:
Bootstrap 3.3.7
Datatables 1.10.13
jQuery 1.12.4
jQuery UI 1.12.1

allan

We'd need a link to the page showing the issue so it can be debugged.

Thanks,
Allan

jtop

Allan,

Here is the jsfiddle that i've been working with.

https://jsfiddle.net/jtoepfer/p0rytvLp/2/

kthorngren

Are you referring to the 3 grey buttons to the right of the Previous, 1, Next buttons?

If so, those are being loaded by the jQuery UI. If you remove "bJQueryUI": true, then those won't appear.

Kevin

jtop

So is that a bug in datatables? Or is the jquery ui not valid in the new version?

kthorngren

Bootstrap and jQuery UI are two different styling libraries. You are loading both libraries and both are trying to display the same buttons. The buttons you see to the right are jQuery UI buttons for paging.

The "bJQueryUI": true, option would work if you weren't also loading Bootstrap. However this option is deprecated in the current DataTables version as described here. Now the jQuery UI styling is loaded in the same manner as Bootstrap and other libraries.

Essentially you need to choose one styling library so that there is no conflicts.

Kevin