Issue with Displaying Plus Signs in Tables Across Multiple Tabs

SiplingerKopf

I'm using a tab with 4 tabs where I display 4 responsive tables.
On a phone in portrait mode (viewing different devices in the browser),
the table of the first tab is displayed with the plus signs in the first column.
When I switch to tab 2, the plus signs are missing, and instead, a horizontal scrollbar appears for scrolling.
The same behavior applies to tabs 3 and 4.

All 4 tables are created with the same properties.
I also have no explanation for the following behavior:
I display tab 2 in iPad format and switch the format to iPhone.
Now the plus signs are displayed. However, they are now missing in tab 1,
and instead, there is a scrollbar present.

Setting scrollX or autoWidth to false does not help.

Here is a code snippet for creating the data tables :

useEffect(() => {

 $('#runner_data').DataTable({
  responsive: true,
  language: {
    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
    },
  ordering: false,
  lengthChange: false,
  info: false,
  data: data_arr,
   columnDefs: [
    { targets: [5, 6], visible: false },
    {.....},
    {....}
   ]

  });

  }, []);

How can I display all the tables with the plus signs?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

Sounds like you might need to use responsive.recalc() when the tab is shown. See this BS tabs example. Add the responsive.recalc() into an event handler for the tabs solution you are using.

Kevin

SiplingerKopf

Thanks for your suggestion. Using .columns.adjust(); helps achieve the desired display with the plus signs when switching between tabs.