Answers

• kthorngren Posts: 21,382Questions: 26Answers: 4,959

  October 2021

  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 Posts: 11Questions: 5Answers: 0

  October 2021

  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 Posts: 21,382Questions: 26Answers: 4,959

  October 2021

  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 Posts: 11Questions: 5Answers: 0

  October 2021

  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 Posts: 21,382Questions: 26Answers: 4,959

  October 2021

  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