Table not resizing inside _wrapper class

mikepoole

I have a table that I am marking as responsive through the class

    <div class="col-12">
        <div class="col-12 mt-3 mb-3">
            <table id="member-details" class="dt-bootstrap table table-striped table-bordered responsive"></table>
        </div>
    </div>

I can see the member-details_wrapper class being created and it has the correct width in my viewport but the table is not resizing within the _wrapper class

My #member-details has a width: 100% !important style as advised in other posts

Any have any ideas why the table is not resizing?

kthorngren

My #member-details has a width: 100% !important style as advised in other posts

See if this example showing the use of style="width:100%" on the table tag helps. It needs to be placed on the table tag as explained in the example.

Kevin

mikepoole

Thanks @kthorngren

I removed the style and added the inline style="width:100%" but all to no avail

I can see the responsive classes being added to the table and the _wrapper being added but when I inspect my table, it has a width of 775px whereas the _wrapper class is 340px (and the computed width shows 100% as it is inline)

I know I am missing something obvious but cannot see it

kthorngren

I copied your code snippet into this Bootstrap 4 example and it seems to be working:
http://live.datatables.net/yitibefu/1/edit

Did you install the Responsive Extension code?

Please provide a link to your page or a test case replicating the issue so we can help debug. Or update my test case to show the problem.
https://datatables.net/manual/tech-notes/10

Kevin

mikepoole

Thanks @kthorngren

When I put the #example table in from your link exactly the same div (with the pre-populated data in the HTML) then it works as expected and is fully responsive within my page

I probably should have mentioned in my previous post that I am populating the data of the table through the JS initialisation (script below)

Are there any other settings I need to add to make it responsive once populated? I have toggled the autoWidth attribute but with no luck

 $('#member-details').DataTable({
            autoWidth: false,
            data: memberDataObject,
            paging: false,
            searching: false,
            columns: [
                {
                    title: "Pay No",
                    data: "PayNumber"
                },
                {
                    title: "Name",
                    data: "Surname"
                },
                {
                    title: "NINO",
                    data: "NationalInsuranceNumber"
                },
                {
                    title: "DOB",
                    data: "DateOfBirth",
                    render: function (data, type, full, meta) {
                        return moment(data).format('DD MMM YYYY');
                    }
                },
                {
                    title: "Memb No",
                    data: "MemberNumber"
                },
                {
                    title: "Dept",
                    data: function (row, type, set) {
                        return row.Department == null ? "" : row.Department.Name;
                    }
                },
                {
                    title: "Location",
                    data: function (row, type, set) {
                        return row.Location == null ? "" : row.Location.Name;
                    }
                },
                {
                    title: "Paypoint",
                    data: function (row, type, set) {
                        return row.PayPoint == null ? "" : row.PayPoint.Name;
                    }
                },
                {
                    title: "Scheme",
                    data: function (row, type, set) {
                        return row.Scheme == null ? "" : row.Scheme.Name;
                    }
                },
                {
                    title: "Category",
                    data: function (row, type, set) {
                        return row.SchemeCategory == null ? "" : row.SchemeCategory.Name;
                    }
                }
            ],
            dom: '<"top"i>rt<"bottom"flp><"clear">'
        });

kthorngren

The Responsive extension will work with data to populate the table. In order to help debug we will need to see the problem. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10

Kevin