Fixed Header on Datatables changes width of columns assigned in percentages

manojmilani123

Hello,

I have below settings on my datatables.

"fixedHeader": true,
"autoWidth": false,
"columnDefs": [ 
            { "targets"  : 'no-sort',  "orderable": false },
            { "orderSequence": ["desc", "asc"], "targets"  : '_all'},
            { "width": "20%", "targets": 0 },
            { "width": "5%", "targets": 1 },
            { "width": "9%", "targets": 2 },
            { "width": "4%", "targets": 3 },
            { "width": "3%", "targets": 4 },
            { "width": "2%", "targets": 5 },
        ],

Problem is I am using responsive plugin, have enabled fixedheaders and when I scroll down, it shows fixed header with the percentages being assigned on the column headers in percentages. But as soon as I scroll back up, it loses the inline percentages that are assigned to header columns. Any solution for this? I need to keep the column width's in percentages as defined by columnDefs.

colin

Hi @manojmilani123 ,

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. 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

manojmilani123

Below is the link to the working page. You can see after you scroll down, it has fixed header with columns being assigned inline width in percentages. And after you scroll back up, it removes the percentages from the column headers. Fix to this solutions would be appreciated.

https://bit.ly/2Q1xjB1

allan

Could you remove the autoWidth option from your configuration of the DataTable please?

Allan

manojmilani123

Thank you very much. It works now!!!