Using Bootstrap-Select with Datatables (Could really use some feedback...)

curiou

Hi all,

After looking at this example (https://jsfiddle.net/mattmorz/kunt518t/4/) I naively thought it should be straightforward to implement a Bootstrap-Select dropdown (https://developer.snapappointments.com/bootstrap-select/) on every single one of my table's columns. However, I am running into a number of issues:

1. When I have scrollX enabled the thead gets misaligned with the tbody once you scroll past a column where the content width is greater than the width of the original width of the column (as set by the width of the <select> dropdown).
2. When I have scrollX disabled, the tbody strangely still scrolls horizontally (even though I don't have my bootstrap4 table within a table-responsive div)
3. When clicking the dropdown it pushes up the thead by the length of the dropdown list. I have tried to adjust the z-index so that it's recognized that when the dropdown list collapses should be a layer on top of the tbody (like in the jsfiddle example above).

I've tried to reproduce this as best as I can: http://live.datatables.net/gujavoce/2/. The two scrollX related misalignment issues are only visible outside edit mode.

Any suggestions on this would be greatly appreciated.

Thank you!

For background, my table has 65 columns and my links/scripts are uploaded in the following order (FYI I am using Flask for the backend):

<link
rel="stylesheet"
href="{{ url_for('static', filename= 'fonts/Roboto.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/bootstrap.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/datatables.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/dataTables.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/select.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/rowGroup.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/responsive.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/keyTable.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/fixedHeader.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/editor.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/buttons.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/autoFill.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/fixedColumns.bootstrap4.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/bootstrap-select.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/main.css') }}">

curiou

I guess the script tag is off limits but here is the plain text version of my script ordering:

src="{{ url_for('static', filename='scripts/vendor/jquery-3.4.min.js') }}">
src="{{ url_for('static', filename='scripts/vendor/popper-1.15.0.min.js') }}">
src="{{ url_for('static', filename='scripts/vendor/bootstrap.min.js') }}">
src="{{ url_for('static', filename='scripts/vendor/datatables.min.js') }}">
src="{{ url_for('static', filename='scripts/vendor/dataTables.bootstrap4.min.js') }}">
src="{{ url_for('static', filename='scripts/vendor/dataTables.select.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/select.bootstrap4.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/dataTables.rowGroup.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/rowGroup.bootstrap4.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/dataTables.responsive.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/responsive.bootstrap4.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/pdfmake.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/vfs_fonts.js') }}"
src="{{ url_for('static', filename='scripts/vendor/dataTables.keyTable.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/keyTable.bootstrap4.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/jszip.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/dataTables.fixedHeader.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/fixedHeader.bootstrap4.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/dataTables.editor.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/editor.bootstrap4.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/dataTables.buttons.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/buttons.bootstrap4.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/buttons.colVis.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/buttons.html5.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/buttons.print.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/autoFill.bootstrap4.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/dataTables.autoFill.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/dataTables.fixedColumns.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/fixedColumns.bootstrap4.min.js') }}"
src="{{ url_for('static', filename='scripts/vendor/bootstrap-select.min.js') }}"
src="{{ url_for('static', filename='scripts/tables.js') }}" type="application/javascript">
src="{{ url_for('static', filename='scripts/main.js') }}">

curiou

Per Allan in this post (https://datatables.net/forums/discussion/41587/scrolly-misaligned-table-headers-with-bootstrap) it looks like using the columns.adjust() API may be of use to fix the misalignment, but I think my implementation might have the incorrect selector(?):

($(document).ready(function() {
    $('select').on( 'shown.bs.select', function (e) {
        $($.fn.dataTable.tables( true ) ).css('width', '100%');
        $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
    } );
}); 

"shown.bs.select" is the event fired when the Bootstrap-Select dropdown has been made visible to the user.

Thanks

curiou

And to clarify issue #2 in the first post, what I meant is that the misalignment is still there with scrollX disabled, but scrollY enabled. When you disable both scrollX and scrollY the misalignment and dropdown collapse conflict (issue #3) disappear.

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

curiou

Hi Colin,

There is a test case linked in the first post (sorry it's a bit lengthy with all the links): http://live.datatables.net/gujavoce/2/.

Thanks!

colin

Thanks for that. I took a look and everything appears to be behaving as I would expected. Please can you give instructions on how to reproduce your issue, and what you would expect to see instead,

Colin