fixedColumns problem when table width is small

jstuardo

Hello...

Please see this fiddle: https://jsfiddle.net/desytec/q17L2nbv/37/

When setting fixed columns (the last) causes that column to create a copy and move right of the actual width of the table.

How can I solve it?

Thanks
Jaime

kthorngren

The problem seems to be that you are using Bootstrap but not loading the Datatables Bootstrap integration files. I updated your test case and removed Bootstrap. Seems to work good:
https://jsfiddle.net/ydvq75nx/

More info about what to load when using Bootstrap:
https://datatables.net/manual/styling/bootstrap

You can use the Download Builder to get the correct files.

Kevin

jstuardo

I have used that builder to get correct files.... that problem occurs in my server and I tried to reproduce in in JS Fiddle.

By the way, your Fiddle does not work either, and by removing Bootstrap files, style was gone. That was the only effect:

kthorngren

By the way, your Fiddle does not work either, and by removing Bootstrap files, style was gone. That was the only effect:

Yes, that removed the Bootstrap styling to show that FixedColumns works. I update the the example with Bootstrap and Datatables from the Download Builder. The example still seems to work.

https://jsfiddle.net/ydvq75nx/2/

Can you provide a link to your updated example with the issue?

Kevin

jstuardo

I don't really know why you tell the example is working... I load your fiddle and it does not work.

Your fiddle is: https://jsfiddle.net/ydvq75nx/2/

And this is how I see it:

kthorngren

I see. I had a different layout that wasn't as wide. Its working now:
https://jsfiddle.net/ydvq75nx/5/

It is recommended to use style="width:100%" in your table tag to allow Datatables to calculate the column widths and table layout. Added that to the table.

Kevin

jstuardo

I cannot do that because of this thread: https://datatables.net/forums/discussion/52141/setting-width-of-a-column#latest

What i have done finally, to solve it as a patch is to have one column with "100%" width and the others, fixed widths in px. That way, last column appears only once because that column expands to occupy all the space. With this, the left border of the last column appears a little wider so I suppose that the fixed last column is over the original last column, but not at the exact same position. This detail is not critical, so I think I will leave this way.

allan

Yes, Kevin is right (as always!) - if you are using FixedColumns you need to have 100% width on the table. This is an assumption that FixedColumns makes. It does unfortunately conflict with the answer in the other thread where I state that 100% width means the browser will try everything it can to keep the width at 100%, even if it means throwing out the widths you give.

The only other option would be to use table-layout: fixed with your table, but even then you might run into issues as it isn't something that has been thoroughly tested for DataTables.

Either way, good to hear you have a workaround now.

Allan