Having trouble with desktop formatting on responsive tables

Having trouble with desktop formatting on responsive tables

asquaredstudioasquaredstudio Posts: 2Questions: 1Answers: 0

https://iswisstools.com/products/double-ended-holders-with-inner-coolant/:
https://debug.datatables.net/igunat:
Error messages shown: N/A
Description of problem: The problem with the site is that when the responsive plugin is enabled - the columns are TOO wide on the page and don't correctly redraw. Not sure how to fix but here is a picture:

Any help would be great!

Answers

  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin
    edited July 2020

    Hi,

    I've just tried your page in both Firefox and Chrome, but it appears to be working okay. What bowser are you using there (looks like Chrome?).

    If you click to sort a column header, does it snap back into place (width-wise)? If so, you might need to call responsive.recalc() when the table is drawn.

    Allan

  • asquaredstudioasquaredstudio Posts: 2Questions: 1Answers: 0

    Thanks for the quick response. Clicking on sorting a column header unfortunately doesn't work. The browser I'm using is Chrome on Mac.

    The problem seems to exist after the viewport is 1024px. Once that width is hit the table doesn't seem to properly calculate the width and draws the table as if the entire viewport was around 1400px.

    Being that the width of all the columns are set, this causes the table to overflow.

  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin

    Hi,

    Thanks. I'm seeing the error as well now when I resize my browser window. I'm going to have to trace this one through - could you replace the minified Responsive Javascript ( https://iswisstools.com/wp-content/themes/child-theme/js/dataTables.responsive.min.js ) with the debug version please ( https://nightly.datatables.net/responsive/js/dataTables.responsive.min.js )?

    Thanks,
    Allan

This discussion has been closed.