ScrollX and large window = issue, how to fix it ?

Geoffrey

Hello,

I use scrollX and scrollY because this is really usefull, but in a big screen, scollX is useless .... Automatically datatables leave the scroll, this is good.
BUT, There is a big display issue, like you can see here: http://jsfiddle.net/j82choyh/
Headers are not align with datas

Do you have an idea please ?

allan

The header appears to align correctly for me. What browser are you using?

Geoffrey

Hello, I have the issue with firefox and chrome as well. Here is a screenshot;
https://gyazo.com/f6b2c3c5a8f8b339ec97a6846e8e0ee0

Any ideas ?

allan

Simply add width="100%" or style="width:100%" to your HTML table so DataTables knows you want the width to be 100%. Updated example.

Allan

Geoffrey

Thank you for your answer, there is no issue on the jsfiddle, but I already get an issue in my web site. So I tried to make the same table with plugin, but I can't make it work. I have colvis and fixedcolumn ..
http://live.datatables.net/hiqojada/1/edit

allan

There is a bug in the 1.0.1 version of Buttons that the example is including. Using 1.1.1 it shows this error:

Uncaught Cannot extend unknown button type: csvHtml5

Removing that button allows it to initialise correctly: http://live.datatables.net/hiqojada/2/edit .

Allan

Geoffrey

Thank you again, sadly I can't reproduce the error on jsbin .... What I understand, the scroll doesn't activate automatically because of $(window).resize().
If I change the visibilty of columns (so if I draw()) ... now I change tabs, I come back, there is no scroll, or I change the size of the window, there is no scroll again ...... :(

Here my jsbin ... http://live.datatables.net/hiqojada/3/edit
Here is a gif that show my issue https://gyazo.com/94463324dc44cce4f6c07a8d29a23427

Look like jquery UI tabs and datatable are not working well about window size apparently ..

allan

The table that is giving you problems is in a tab? You need to call columns.adjust() when the table is made visible.

Allan

Geoffrey

I have two tables, each in tab.

Please can you give me the right link, I got an "error 404".

Thank you ! =)

Geoffrey

Hello, so Here what I did:

$( "#tabs" ).tabs({ activate: function () { $(window).resize(); table_liste_materiel.columns.adjust(); table_liste_alerte.columns.adjust(); } });

EDIT1:
sadly I said that you answered to the question, but this is not good already. Because When I sort the colums, this is not working, Here an example:
https://gyazo.com/996789d6458ff856141334b9c15712c8
Scroll disapears ! :(

You can see that when I have the scroll the header is not in a good alignement with datas, so I ave issue when I have the scroll, and when I don't have it .... DOn't know what to do ..
https://gyazo.com/816c0c19c1c1c262ac8e8bd4b0c96bb9

EDIT2:
When I use columns.adjust(), I have the scroll but I don't have a good alignement and when I use fnAdjustColumnSizing(), I have a good alignement but I don't have the scroll ... ^^

allan

Sorry - link above corrected.

I would really need a link to a page showing the issue to be able to offer any help.

Allan

Geoffrey

Ok I understand .... but I really can't reproduce it ... I will try btw .. Here is the latest js bin, this is almost exactly the same thing that I have ...

http://live.datatables.net/hiqojada/6/edit

Geoffrey

Ok, I updated the library and it looks like this is working well now ^^

allan

Good to hear - thanks for posting back.

Allan