Showing/hiding columns with Bootstrap css shrinks table width continously

paultechguy

I am using the DataTables Bootstrap css. If you show/hide a column, it begins to continuously skink the table width more and more each time. If I comment out the included DataTables Bootstrap css file, things work fine.

I call the standard way to show/hide a column.

 var column = userTable.column(2);
 column.visible(!column.visible());

It appears DataTables puts an inline "width" in pixels on the table element; this gets smaller with each show/hide.

Any idea how to fix?

kthorngren

Seems to work ok in this example using Bootstrap:
http://live.datatables.net/cufeputi/1/edit

Its a basic configuration. Maybe something in your config is causing the issue. Can you provide a link to your page or update the example to show the issue?

Kevin

paultechguy

Here is a demo link (just click the show/hide several times to see table shrink):

paultechguy.com/table/table.html

You can view the source to see this stuff, but generally:

Using
- Bootstrap v4.0.0-beta
- JQuery v3.2.1
- DataTables

JS: https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-html5-1.4.2/datatables.min.js

CSS: https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-html5-1.4.2/datatables.min.css

kthorngren

Thanks for the example. I copied your code here:
http://live.datatables.net/qolezace/1/edit

I updated the JS and CSS CDN's to include the BS4 package and removed your bootstrap CSS and JS lines. Was able to replicate your issue. then added width="100%" to the table tag and it seems to work good.

General recommendation is to have `width="100%" in your table tag to allow DT to know the width. Allan can explain more fully if needed.

Kevin

paultechguy

Thanks Kevin. Yes, that works now...but needed to have the inline style of width=100%. I really didn't find that attractive given it's not HTML5 compliant, but can probably live with it.

Maybe Allan can shed some light on this.

Again, thanks...nice to square this up over the weekend.

allan

You can use either style="width:100%" (which is HTML5 compliant) or width="100%" which is legacy HTML. Both will work with DataTables.

The reason for the need of these is that I've found it virtually impossible to get a percentage values from a stylesheet directly - we need to get it from the element. DataTables then uses that to make sure that the table is 100% width.

Regards,
Allan