Tables inside Accordions, Tabs, and Modals

You’d think it would be easy, but then sometimes the table is too big on mobile and needs to horizontally scroll, and then the table-scrolling function doesn’t load inside the accordion (or modal). Gross.

It happens because the table scrolling function only works on tables that are visible at the time the page loads, and since accordions are closed by default, the tables aren’t visible. So then when you open the accordion, it doesn’t know that the table needs to scroll.

How To

You’ll need to put the relevant function inside the ELSE of the window load function, because we don’t want it to run inside the CMS.

Accordion

$('.card .collapse').on('shown.bs.collapse', function () {
  banno.site.setTableScrolling();
});

Tabs

$('[data-toggle="tab"]').on('shown.bs.tab', function () {
  banno.site.setTableScrolling();
});

Modals

$('.modal').on('shown.bs.modal', function () {
  banno.site.setTableScrolling();
});

Tags: bs3, bs4, accordion, tab, modal, table