0

Using Bootstrap 4 with DataTables. I have a hidden card containing a datatable. When loading the page if a saved preference (to show the card containing the table) is checked then I show the card and then adjust the columns and draw:

a piece of $(document).ready:

/* code to create table here */

/* wait for the table initialization to finish before restoring card visibility */
$('#dashboardProfitsTable').on('init.dt', function(e, settings, json) {
  $.when(
    restorePrefs(currentPrefPage))
    .done(function() {
      /* did user leave this card visible last time? */
      if ($('input[name=ShowProfit]').is(":checked")) {
        $('#profitsCard').show();
        dashboardProfitsTable.columns.adjust().draw();
      }
    });
});

and some relevant HTML:

<div id="profitsCard" class="card" style="display:none">
  <div class="card-body pt-0 pb-2">
    <table id="dashboardProfitsTable" class="table" style="width:100%">
      <thead>
      <tr>
        <th></th>
        <th><select id="column1" class="form-control"></select></th>
        <th><select id="column2" class="form-control"></select></th>
        <th><select id="column3" class="form-control"></select></th>
        <th><select id="column4" class="form-control"></select></th>
      </tr>
      </thead>

After the show() the right side of the select in the right column (Last 30 Days) is clipped by a couple of pixels: select element is clipped

but if I resize the window width even 1 pixel (wider or narrower; doesn't matter) the table recalcs widths and redraws so the right side of the 4th is not clipped: select element not clipped

And after that initial window resize everything is fine at every width. It's just the initial show() that clips the rightmost select. Is there something I can do besides columns.adjust().draw() after show() to get the datatable to recalc as if it was doing a window resize recalc?

scanlin
  • 107
  • 7
  • Have you tried to initialize the table after the show ? – stan chacon Feb 14 '20 at 20:48
  • That would work, as creating the table in a visible card works. My goal was to hide this card (and several others) until the data (and table) are ready to show (looks better visually than staring at blank cards for a while). I'm just not sure why a window resize results in a different column width calculation than calling columns.adjust().draw() when the table and card are visible. ? – scanlin Feb 15 '20 at 15:06
  • 1
    Well in many cases it happends to me that the calculation of the table on some hidden element is not accurate, I cant really tell you why that happends? maybe once the div that contains the table is visible it gain some padding or margins, maybe Jquery have issues with hidden elements and the calculation of their width like this [post](https://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none) explain, however the way I deal with that issue was the one I mention before or instead of show the table I just append it to the div and destroy it – stan chacon Feb 15 '20 at 15:25

0 Answers0