Responsive buttons cause columns not to go full-width when expanded/collapsed

SgianSgiath

Link to test case: https://www.jmu.edu/talentdevelopment/resource_collection/data-table-only.shtml
Debugger code (debug.datatables.net): Debugger in place runs on load
Error messages shown: No error messages
Description of problem:
In Safari on macOS or iOS, when one is at a responsive/mobile resolution, the green buttons show up. When you click one to expand the row to see columns, it works fine. When you click the button again to collapse, the column goes to inline and columns stack.

allan

media (min-width: 120px)
.tabular-row, .tabular-cell {
  display: block;
}

in external-datatable.css is the problem.

You don't want to display a table row or cell as a block - it isn't, its a table-row / table-cell.

Remove that and it should work.

Interesting that Firefox doesn't behave the same way as Safari. I haven't checked Chrome.

Allan

SgianSgiath

Thanks Allan! That was easy. I overlooked that. And ironically, it was working in Chrome.