Answers

• kthorngren Posts: 21,887Questions: 26Answers: 5,057

  April 7 edited April 7

  I took your code and started this test case:
  https://live.datatables.net/peruduwo/1

  I removed the event handler just to see the behavior of the div elements. Resizing the left div doesn't seem to affect the size of the right div. This screenshot is after making the left div smaller. You can see the right div stays the same size as when the page is loaded.

  

  This is why the table size doesn't change. I'm not sure, without researching, what you need to do to have the right div dynamically adjust the size with the solution you are using. Stack Overflow might have some tips for you.

  You may need to use resizeObserver() instead of $(window).resize(function() { .. }); as you will want to track the size of the div element not the window. I don't think $(window).resize(function() { .. }); will fire on resizing the div. You will probably want a way to debounce the event handler because it will likely be called many times while resizing the div so the columns.adjust() isn't called many times in a row.

  You will want to remove scrollX: true as it competes with Responsive to keep the table within the container.

  In the event handler you will want also use responsive.recalc() like this:

  table.columns.adjust().responsive.recalc();
  

  Feel free to update my test case if you still need help with this.

  Kevin
• ldariva Posts: 6Questions: 1Answers: 0

  April 8

  Hi Kevin,
  Thanks for answering so quickly. I tried to use the resizeObserver on left division but it didn't work.

  I added the following js script to code.

  <script>
  
  var table = new DataTable('#example', {
      responsive: true,
      autoWidth: false
  });
  
  function adjustTable() {
      table.columns.adjust().draw();
  }
  
  const resizeObserver = new ResizeObserver(function(entries) {
      for (let entry of entries) {
          adjustTable();
      }
  });
  
  resizeObserver.observe(document.getElementById('left-div'));
  
  </script>
  
• kthorngren Posts: 21,887Questions: 26Answers: 5,057

  April 8 edited April 8

  Take a closer look at my test case and you will see the right div doesn't change sizes when adjusting the left div. This is base don the code snippet you provided. Since the right side doesn't change change the table size doesn't change thus Datatables doesn't see a size change to recalculate the hidden columns. The first thing to fix is the dynamic adjustment of the right -tag divwhen the left-tag div` is adjusted.

  Again if you want help then please update my test case or provide a test case that replicates the issue.

  Kevin
• ldariva Posts: 6Questions: 1Answers: 0

  April 8

  Hi Kevin. It actually does change. Just scroll down the window a bit and you'll see a handler that allows you to resize the div.
• kthorngren Posts: 21,887Questions: 26Answers: 5,057

  April 8

  That is what I did. I scrolled to the bottom and used the handler to make the left div smaller. If you inspect the right div before and after it remains the same size. There is more white space but the div that Datatables is in remains the same. Thus the table width stays the same.

  Before resizing:

  

  After resizing:

  

  The size remains the same at 540 x 666. You will need to find out how to have this div dynamically resize.

  Kevin
• ldariva Posts: 6Questions: 1Answers: 0

  April 8

  Hi Kevin,
  I am sorry but I am not been able to reproduce what you did. I copied your code to a local HTML file and opened it in Chrome and Edge and both show the same behavior. Take a look in the pictures I am posting. I rac reduce the size of right div up to 1038 px and it is ok. But when I increase just 2 px more the table disapear. Actually it doesn't really disapper. It is pushed down as you can see in the thrid picture.

  Here it ok.
  

  Here it desapearded
  

  Here I found the table pushed down
  
• ldariva Posts: 6Questions: 1Answers: 0

  April 8

  One more observation. The responsive behavior works when changing the window size. For example, playing with the browser zoom. But regarding the size of the div it does not.
• kthorngren Posts: 21,887Questions: 26Answers: 5,057

  April 8

  These issues is not due to Datatables. Sorry but I have not used the resize control before so I have no suggestions of what to do.

  Here I found the table pushed down

  I believe the Bootstrap grid system is moving the div below the left div when the right side is too large to fit. You will see the same behavior without Datatables.

  Possibly you will want to remove the grid system for resizing. See the SO thread for some options that might get you started.

  Just to show this working I moved the table into the left div and used the ResizeObserver. Also changed the height so the resize control is available.
  https://live.datatables.net/farodoja/1/edit

  Close all the tabs of the JS BIN except Output and you will see how the table adjusts with the div width. Once you find a resize solution that works for your environment the Datatables should work correctly in the right side.

  Kevin
• kthorngren Posts: 21,887Questions: 26Answers: 5,057

  April 8

  I updated the last test case to move the table to the right div and a new ResizeObserver for that div:
  https://live.datatables.net/xeruwobi/1/edit

  This shows that the right div doesn't resize when resizing the left div. The ResizeObserver fires once when the the page is loaded and if the table is moved below the left div.

  Kevin
• ldariva Posts: 6Questions: 1Answers: 0

  April 8

  Hi Kevin,
  Yes. This is definitely something related to Bootstrap.
  I tried to change the Datatable to the left div in my real app just to find out the problem happening in the navigation tree.
  For while I will restrict the size of div where the Datatable is to avoid this problem.
  Anyway thank youvery much for your support.