"scrollx" and header of the table

trintrintrava

With using "scrollx":true; the header collumns are changing and doesn't fits to datacilumns untill you press ordering of the column. You can see it on printscreen.
Maybe somebody knows how to fix this?)

colin

I'm not seeing it here. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

trintrintrava

testcase: http://live.datatables.net/xuxejitu/1/edit

@colin even without content if you will scroll down in the right window you will see that the header {{i}} is smaller than the datacolumns. the problem begins with adding scrollx:true sorry for the view of project)
I am the new one in web programming)

also thank you for your help)

trintrintrava

@colin if I am making some static table it's okay and it's working, but I am making some table from database with sql of user so my table is dynamic

kthorngren

Looks like you might need to add style="width:100%" to the table tag as demonstrated in this example.

Kevin

trintrintrava

@kthorngren for some reason it doesn't help with the header problem :c

trintrintrava

@kthorngren the intresting part is that thead starts to fit to the columns after you cklick on thead

kthorngren

The problem is that you are initializing the table in a hidden element so Datatables can't determine the actual column width. You will need to use columns.adjust() after unhiding the table, for example:
http://live.datatables.net/xuxejitu/2/edit

Also you are missing dataTables.bootstrap.min.js and the styling files for the buttons. The recommended way to get the proper styling files is by using the Download Builder. Also you have some duplicated CSS and JS includes which I commented out.

Kevin

trintrintrava

@kthorngren thank you very much!!!

kthorngren

I commented these lines:

  <!--
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{% static 'css/SQLExec.css' %}">

and

<!--    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>-->

I added the columns.adjust() to the function where you unhide the table:

    function showPage() {
      document.getElementById("loader").style.display = "none";
      document.getElementById("myDiv").style.display = "block";
      $('#example').DataTable().columns.adjust().draw();
    }

Kevin

trintrintrava

@kthorngren Thank you very much!

It is not the task of discussion but maybe you also know this: maybe it is possible to make width of table columns flexible so user can change it by the mouse?

kthorngren

There is nothing built into Datatables to adjust the column width using the mouse. There have been a couple of third party tools created for this. They are old and people seem to have mixed success with them. You can search the forum fo rthem but here is one example. You can try them but there is no support for them if they don't work. You will need to contact the developer of the library.

Kevin

trintrintrava

@kthorngren thank you very much for your help!