Bootstrap effecting elements formatting?

InnovaMatt

Hello,

I'm running into an issue with a Datatable nested within a Bootstrap 4 Card Element. The divs for the entry filter, search box, entry number display and pagination are becoming full width and the pagination buttons are also lost.

Here's a screenshot. I'm currently just running the program on an XAMP local host, so would have to come up with something if a closer look at the source code was required.

I would be very grateful for any help which can be offered.

kthorngren

Have you loaded all the Datatable's Bootstrap integration CSS and JS includes?

Can you post a test case showing the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

InnovaMatt

Thanks for your response kthorngren.

Apparently I was using only one of the two Datatable / Bootstrap CSS - however loading the second hasn't resolved the issue, although I am having to load them before my bootstrap (I'm actually using a very slightly customised version of the Bootswatch Cyborg Theme, built with bootstrap.build) and custom CSS to avoid them undoing my styling.

Would I be better off downloading a copy of the two Datatable CSS files, making the necessary customisation's and then loading that modified version last instead? Loading last didn't seem to fix the issue though.

Anyway, as requested on the page you've linked, here's my code on live.datatables.net. Murphy's law, while there are obvious styling issues, the datatable elements in question are correctly laid out in that version. I might need to wait until I've sorted our hosting out rather than using live.datatables.net as an intermediary.

MSLtd

Hello @InnovaMatt - I'm not entirely familiar with Bootstrap itself, so you'll have to forgive my not knowing much about what cards are, but I deal with responsive CSS quite often, so I should be able to help out.

What kind of behaviour are you expecting from the card exactly, and how do the Data-table elements effect this functionality?