Datatables 2.0, Responsive and BS5 not working

dariov

Link to test case: https://live.datatables.net/wuraxuci/3/edit

Debugger code (debug.datatables.net):
Error messages shown: nothing
Description of problem: Before upgrading to 2.0 responsive worked as expected. Recently i upgraded to datatables 2.0. If you check the test case you can see that resizing the window doesn't activate the responsive extension. No arrow is shown and the the design looks weird. I'm on mac and tested with safari and chrome. I also checked the 2.0 changelog and it seems there is nothing that affects the responsive extension.

allan

Your example actually appears to work okay for me (Chrome and Firefox - I don't have a Mac to hand to try it on, apologies):

That isn't happening for you in that example?

Allan

dariov

hello Allan, thanks for the reply. Yes if you load the page it's fine but if you manually resize the window it doesn't work. Before 2.0 it did

allan

Ah! Thanks for clarifying that. There is an error in the HTML - specifically:

style:"width:100%"

in the table. To be valid HTML it should be:

style="width:100%"

With that, it works as expected.

Allan

dariov

oh i see....sorry my bad. Anyway in my project i use the bootstrap class w-100 .....let me check if that's why it doesn't work

dariov

@allan i made a change to the test case and replaced style="width:100%" with the bootstrap class w-100 and it doesn't work

allan

Can you update the test case to show the issue, or link to your page with the error?

Allan

dariov

here is an updated version using the bootstrap 5 class w-100

https://live.datatables.net/wuraxuci/6/watch

Alex_819

Same here, Responsive is not working correctly after Datatables 2.0, on window resize, with tables which have more then 6 or 7 columns.

allan

@dariov Thanks for that! I see that w-100 has been added to the class list, but the style attribute was removed. The problem with this is that it is virtually impossible to read a percentage value from the browser for a width - pixels are easy, but a percentage value without doing a ton of parsing, not so much.

For that reason it is (almost) a requirement to add style="100%" to the table, and if you do that to your example it works.

I say almost since there are some cases when one might not want the table to adjust size automatically. I came very close to setting it automatically for DataTables 2...

@Alex_819 - Same issue? Missing style="width:100%", or something else? Can you link to a test case please?

Allan

Alex_819

@allan I already have <table class="table table-sm table-bordered table-striped table-hover table-light datatable" style="width: 100%;"> but still responsive is not working correctly

allan

It seems to work in the example I provided. Is it working for you there? If yes, please link to an example that isn't working.

Allan

dariov

@allan than k you very much now responsive is working fine. I think i found a bug but i will open another thread after further investigation

Alex_819

@allan, I leave you a video link that I have recorded of my project where I show that responsive is not working correctly, in the video you will see that everything is responsive except the table.

https://drive.google.com/file/d/1-cEMBVpEHhShSbIB071TmaUl7uucbBRm/view

dariov

@Alex_819 i think it' better if you provide us with the html and js code, you're probably missing something

Alex_819

@dariov , example link: https://live.datatables.net/sohakiya/3/edit

dariov

@Alex_819 if you remove autoWidth: false it works ( i also added nowrap and dt-responsive classes to the table html tag but i'm not sure if the last one is required)

Alex_819

@dariov, Ok working fine on removing autoWidth: false.

@allan, can you figure out why autoWidth is causing problems with responsive?

allan

It is needed because it allows DataTables to automatically perform column width calculations.

Allan

nelero

Hi,
there is a problem with column width calculation in responsive mode.
If a column is hidden by css, table width is not full width.
But if we use visible property of dataTable, it's ok.
I've tried to use the datatable property width but without success.

Width calculation seems buggy. Here a bin to check out
https://live.datatables.net/jipakula/1/watch?html,js,output

allan

The use of Bootstrap's d-none is what is confusing it. It you want to hide a column completely with Responsive use its special never class - https://live.datatables.net/vinupido/1/edit .

Allan

nelero

Great !
i replaced the default bootstrap's class by never and it's ok.
Thanks !