After updating from 1.10.20 to 1.10.21 the 'Show x Entries' wraps to three lines.

funk16

I noticed when comparing the generated datatable html from 1.10.20 vs 1.10.21, there are several differences, but what stands out as possibly causing the issue is this change:

.20:
the top level div loses a 'dt-bootstrap4' class (not sure if that has any effect).
There are two divs lost under the top level div. <div class="row"><div class="col-sm-12 col-md-6">

<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer"> <div class="row"> <div class="col-sm-12 col-md-6"> <div class="dataTables_length" id="DataTables_Table_0_length">

.21
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer"> <div class="dataTables_length" id="DataTables_Table_0_length">

There are no differences between the html and javascript building the datatable other than updating the datatables version in my comparison.

Is there something we have to do differently when building the DataTable on .21 to generate the row divs now? This was called out by our business analyst, and I'm not sure besides a rollback, what options we have.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

funk16

Hi Colin,
thanks for the reply.

I couldn't replicate it using live.datatables but could on jsfiddle. I noticed that bootstrap.css wasn't pulling in on live.datatables, so I wonder if that's the link to the issue:

http://live.datatables.net/gikayeyi/1
https://jsfiddle.net/funk16/sqvcfo31/1/

-Shane

funk16

i mocked in json data instead of the ajax post we used, so you'll see that in the commented js.

kthorngren

Looks like you haven't included the Datatables BS4 styling files as described here. You can use the Download Builder to get the proper files. Also your example loads jquery.js twice which you shouldn't do. I updated your example from the download builder:
https://jsfiddle.net/6m178zoa/

Kevin

funk16

Thanks Kevin, Your sample looks like how we want it.
thanks so much for your time.

funk16

one thing I just noticed... the up/down sort images changes between our samples. I thought I saw those images linked in the datatables.css, but you commented that out in my sample.... Which arrows are supposed to show?

kthorngren

This is the default Datatables example:
https://datatables.net/examples/basic_init/zero_configuration.html

This is the Bootstrap 4 example:
https://datatables.net/examples/styling/bootstrap4.html

The fixed example matches the BS4 example.

Kevin

funk16

thanks, that explains it!