Adjusting columns looses/resets column sizes

CleverHanz

I am trying to get a table to initialize with the following code. When I do it does not render properly. I get a horizontal scroll bar until I resize the page.

DocketListTable = $("#DocketListTable").DataTable({
            dom: "<'row'<'col-sm-8'i><'col-sm-4'f>>t",
            "autoWidth": false,
            "scrollY": 350,
            "paging": false,
            "scrollCollapse": true,
            "processing": true,
            "ServerSide": false,
            "searching": true,
            "responsive": true,
            "deferRender": true,
            "order": [[3, "desc"], [1, "asc"]],
            "columnDefs": [
                {
                    'targets': 0,
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                { targets: [3], type: "DatatableDate" }
            ],
        });

So, I add the following line just after I render the table to refresh it. When I do that all of the columns get set to the same size

$.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();

What am I doing wrong here. I am very new to CSS in general and know virtually nothing about the DataTable plugin.

kthorngren

Do you have style="width:100%" defined on your table in HTML?

Is the table hidden when Datatables initializes?

CSS issues are difficult to troubleshoot without seeing it. Please post a link to your page or a test case replicating the issue

Kevin

CleverHanz

Afraid I cannot provide a link. The page is behind a firewall and setting up a test case is quite a bit of work.

The table is not hidden on initialization. But we are using MS MVC and it is embedded in a partial view within another view. So, I am not sure where exactly the CSS is getting lost.

The style="width:100%" is defined on the table tag in the HTML. Is that good or bad? Here is the entire tag if that helps.

<

table class="table table-striped table-condensed table-bordered dt-responsive nowrap table-hover" style="width: 100%" id="DocketListTable">

I understand how tricky this can be to troubleshoot remotely. But any help or advice you can offer is greatly appreciated.