Why does a width specification in columnDefs only apply to the header?

vsajip

Link to test case:
No test case, see description below.

Debugger code (debug.datatables.net):

Debugger won't load into Firefox either as bookmarklet or as a snippet pasted into the console.

Error messages shown:
None.

Description of problem:

When I initialize my table like this:

          table = $('#ti-table').DataTable({
            //columnDefs: [
              //{
                //width: "15%",
                //targets: [0]
              //}
            //],
            ajax:           '/get/my/data',
            scrollY:        tbh,
            deferRender:    true,
            serverSide:     true,
            processing:     true,
            ordering:       false,
            searching:      true,
            scroller:       true
          });

I get this table:

but if I uncomment out the columnDefs part, the width specification only applies to the header, not the body:

How come?

vsajip

N.B. This is with 1.13.4 of datatables, jQuery 3.7.0.

kthorngren

The columns.width seems to work in this test case:
https://live.datatables.net/qoliyehi/28/edit

There is a styling issue specific to your page. Make sure you have all the correct CSS and JS for the styling framework you are using by using the Download Builder. If you still need help please provide a link to your page or a test case replicating the issue, update mine if you want, so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

vsajip

Here is a link to a page which displays the problem:

https://app1.red-dove.com/

The table is on a page in a hidden tab pane (this affects how it needs to be initialized). From the above page, click "Grid tests" in the sidebar on the left and then on the "Test Stuff (Work in progress)" tab. You can see the table initialization in the testingreds.js file snippet. I'm using Firefox 114.0.

Note that the header shows a different column width from the body.

kthorngren

If the Datatable is initialized in a hidden tab then it can't make the calculations need to set the column widths properly. Use columns.adjust(), like this example when the tab becomes visible. You will need to use an event handler appropriate for the tab system you are using.

Kevin

vsajip

But the tab isn't hidden when the Datatable is initialized. I was only explaining why you need to click "Grid tests" and then the tab.

kthorngren

You are using Bootstrap 4 and are loading the proper CSS for the base Datatables but you are loading scroller.dataTables.min.css instead of scroller.bootstrap4.min.css. That might cause an issue. Use the Download Builder to get the proper files for Bootstrap 4 integration.

Kevin

vsajip

I used the CDN page to download individual files from the CDN (rather than the bundled version), and I just selected Bootstrap4 at the top, and used the URL it gave me. Note that some of the files seem to be BS4 specific. For Scroller:

For another extension:

Which is why I assumed, even though there's no refernce to BS4 in the Scoller URL, it would work.

Possibly the CDN page needs to show the BS4-specific filename when BS4 is selected at the top? Otherwise, how do you know what the URL is for that specific file?

allan

Use the download builder and at the bottom uncheck the "Concatenate" option. It will show all the files that you need to include.

It does look like there is an error on the CDN page when changing styles though. Not all the files are correctly updated. Thanks for pointing that out.

Allan