Responsive collapsed issue

  • Resolved fashioncoree

    (@fashioncoree)


    8 years, 9 months ago

    Sorry to bother you once more, I’m at a standstill.

    Desperately trying the get the responsive collapse feature to work inside a collapse-able panel (bootstrap). If the panel is not collapsed on page load it works but if it’s collapsed on page load it will not go through and only the standard table will show (non-responsive).

    Do you have any clue as to what this could be?
    To me it seems that if the responsive collapse loads before the table is shown it fails to change any settings?
    Can it be loaded with custom JavaScript? (as when I click the “collapse in” button)

    Best Regards

    https://www.ads-software.com/plugins/tablepress/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    The reason for this likely is that the table is initially hidden, when the panel is closed. Due to this, the JS for the collapse mode can not calculate/detect column widths and other table information.

    Unfortunately, I don’t really know how this could be fixed. You could maybe try using some custom JS code where opening the panel triggers a re-calculation of the collapse mode. Unfortunately, I’m not familiar with this, so that I can only suggest to take a look at the DataTables API, which also contains info about the collapse mode: https://datatables.net/reference/api/#responsive

    Regards,
    Tobias

    Thread Starter fashioncoree

    (@fashioncoree)

    Hi again, Tobias!

    Thank you so much for giving me the link, it led me to THIS

    I couldn’t solve this with the css parameter display, as I got several tables on the same page.
    I decided to add a function to the toggle-button instead and came up with this: 

    // Recalculate table width on click, for responsiveness inside collapseable panel

function collapsebutton() {
    setTimeout(waitasec, 500);
}
function waitasec() {
    $('.tablepress').DataTable()
        .columns.adjust()
        .responsive.recalc();
}

    And on the button just a simple onclick :
    onclick=”collapsebutton()”

    I had to set a timeout because the table did not load quick enough resulting in the function running before the table was displayed.
    I’m just writing my solution here if someone else happen to find themselves in a similar situation.

    Thank you once again, Tobias!

    Best Regards

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive collapsed issue’ is closed to new replies.