DataTable Render with ScrollY (table body is getting resized but thead is not getting resized)

Question

am using datatables and also adding ScrollY into it... so when i have a lot of column that my screen can't fit all of it, it will just add vertical scroll in datatables form.... and the problem is adminlte have a feature that can hide and show sidebar and it will change overall area of datatables and in the result it will render wrong just like this:

my table body is getting resized but thead is not getting resized

This is a test link to my temporary page https://htmlpreview.github.io/?https://github.com/farazGreen/DataTable/blob/master/GreenBow_%20TEST.html

Same question has been asked by another person in ADMINLTE site https://github.com/almasaeed2010/AdminLTE/issues/1136

I have Create a GIT [GIT Link](https://github.com/farazGreen/DataTable) — Munasir Pv, Aug 04 '16 at 07:27

score 1 · Answer 1 · answered Oct 02 '18 at 07:42

I think the way I took was not very smart, but I couldn't find the option anyway.

First, by using the chrome dev.tool, I found related table layers that has very limited pixed width which defined by datatables.

Second, I gave the css width with force(!important) option.

<style>
    .dataTables_scrollHead {
        width: 100% !important;
    }
    .dataTables_scrollHeadInner {
        width: 100% !important;
    }
    .dataTable  {
        width: 100% !important;
    }
</style>

Anyway it works but I really want to find elegant solution.

Good luck

Ankur Bhadania · Answer 2 · 2016-08-04T10:07:53.727

0

Try to add autoWidth to false

$('#example').dataTable( {
  "autoWidth": false
} );

Or you can resize() table on window resize event

$(window).resize(function () {
            $("#example").resize();
});

Edit

In my local pc this code working only add "autoWidth": false and remove the scrollY or "scrollY":""

$('#tblOpWaiting').DataTable({
    "bFilter" : false,
    "ordering" : false,
    "scrollY" : "",
    "scrollCollapse" : true,
    responsive : true,
    "paging" : false,
    autoWidth:false
});
$('#tblOpConsulted').DataTable({
    "bFilter" : false,
    "ordering" : false,
    "scrollY" : "",
    "scrollCollapse" : true,
    responsive : true,
    "paging" : false,
    autoWidth:false
});

edited Aug 04 '16 at 10:07

answered Aug 04 '16 at 07:17

Ankur Bhadania

4,123
1
23
38

Please do check this link, Window is not getting resized, it is a div which gets resized and I tried autoWidth:false also autoWidth:true [Check This Link](https://htmlpreview.github.io/?https://github.com/farazGreen/DataTable/blob/master/GreenBow_%20TEST.html) – Munasir Pv Aug 04 '16 at 07:25
"paging" : false you have forgotten to put a comma "," if you check your console window you can see the error Uncaught SyntaxError: Unexpected identifier so the datatable property did not get set. try to put the comma, and see if it works.. It didnt work for me – Munasir Pv Aug 04 '16 at 09:37
@MunasirPv remove the `scrollY` then it's working fine – Ankur Bhadania Aug 04 '16 at 10:07
my question specifically tells that I want to get result with SCROLLY, i know that it will work very well without ScrollY, I do appreciate your willingness to help! – Munasir Pv Aug 04 '16 at 10:10

DataTable Render with ScrollY (table body is getting resized but thead is not getting resized)

2 Answers2