Small bug on Fixed Column Bootstrap 4 when adding table-sm

dan@19ideas.com

When I initialize my fixedColumns on datatables with the following options:

 DataTable(
        {
          scrollX: true,
          scrollCollapse: true,
          fixedColumns: true
        }

Everything works, but when I add table-sm to my table:

<table class="table table-sm table-bordered nowrap" >

the bootstrap order arrow shows up within the cell. I tested this with multiple records, and this only occurs on the first record only.

colin

Hi @dan@19ideas.com ,

That one has actually been fixed, you just need to grab the nightly builds for the fix before it gets officially released. Here's the problem reproduced, and here again fixed with those nightly builds.

Cheers,

Colin

dan@19ideas.com

Is this versioned? I'm grabbing the packages via npm..

colin

I don't believe so, I'll check.

allan

The npm packages are versions, but what Colin was meaning was that the fix hasn't yet been tagged and released. It will be included in 1.10.17 which will be before the end of the month (at least - that's the plan!).

If you install datatables.net-bs4@08272535735377e98158d87e02fb0e91246e2202 via npm, that will pull the latest commit (at the time of writing this) which contains the fix.

Allan

dan@19ideas.com

Thanks guys, I wasn't aware of the way versions are done.

colin

Tbh nor was I

allan

That references a specific git commit. I wonder what would happen if I put that in as a tag though... (I'm not going to try it to find out!).

You can use either a specific commit to get the tree at that point, or use a tag that has been explicitly added. We tend to just use semver tags.

Allan

ihuangmx

I use the downloader tool to get the datatables code, so I want to know when I can't get the version that include this bug fix

allan

The versions available through the download builder and npm both contain this fix. If you are having a problem with it, please link to a test page showing the issue.

Allan

aolivero

mh, i'm having problem with it.

i'm using following libreries:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/fc-3.2.5/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/fc-3.2.5/datatables.min.js"></script>

zmaniacz

This issue persists with the current versions of data tables (1.10.19), fixed columns (3.2.6) and bootstrap 4.3.1.

https://imgur.com/PbfkFtY

kthorngren

Yes, still seems to be an issue. Here is the test case @allan has asked for:
http://live.datatables.net/sotulake/1/edit

Also note the scroll bar for column 0.

Remove table-sm from the table and it seems to work correctly.

Kevin

allan

Thanks for the test case Kevin!

Fix committed here.

Allan

zmaniacz

Thanks for working on this, Allan. I've switched to the nightly build and while the arrow is gone, I'm still getting double scrollbars on the fixed column:

http://live.datatables.net/wejofiqo/2/edit

Thanks for all your hard work!

allan

Oddly - I'm not. What browser and OS are you using please?

Allan

zmaniacz

Windows 10 1809, latest Chrome and latest Edge Insider (so both chromium based).

Firefox does NOT have the issue.

Checked on a MacBook, and it looks fine on Safari and Chrome there. So that's nice and weird.

Thanks.

zmaniacz

Diving into it a bit, it looks like it's adding the scrollbar width to the width of the DTFC_LeftBodyLiner. So in my example I'm seeing 17px added to the width of the DTFC_LeftWrapper and then set as the width of the DTFC_LeftBodyLiner. Some kind of scrollbar nonsense going on.

allan

I've seen related issues before if the browser does the calculations while the scrollbar is shown. I wonder if that is what is happening here. I don't have a Win10 machine to hand atm unfortunately, but I'll check later. Using latest Chrome on linux appears to be okay.

Allan