Table not resizing inside _wrapper class

Table not resizing inside _wrapper class

mikepoolemikepoole Posts: 11Questions: 5Answers: 0

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?

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • mikepoolemikepoole Posts: 11Questions: 5Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • mikepoolemikepoole Posts: 11Questions: 5Answers: 0

    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">'
            });
    
  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

Sign In or Register to comment.