Support » Plugin: TablePress » Responsive Table error

  • Resolved sadocs

    (@sadocs)


    Good day

    I have been creating multiple tables using TablePress. The first bunch of tables work well and are responsive according to the shortcode instructions ( [table id=(insert id here) responsive=collapse responsive_breakpoint=”phone” /] ).

    But then for some reason any new tables I create, using the same shortcode instructions just with different table id’s, do not respond to the collapse instruction. I prefer the collapse response because of the volume of information that needs to go into the table, and I want it to collapse on desktop as well as mobile.

    My process:
    I import the tables from google sheets by downloading them in CSV format, then importing them onto TablePress. I then also activate the auto-import extension on them by choosing the publish to web > link > specific sheet in CSV format, and copying that link into the URL for auto import table updates every 15minutes. This has not given an issue and I did the same thing for every table.

    I also changed the colour of the table header in the Plugin Options tab by inserting custom CSS code

    .tablepress thead th {
    background-color: #ed8f0c;
    }

    I’m not sure if this perhaps caused the problem? I tried to see by deleting this, but the tables remain unresponsive.

    Any assistance would be greatly appreciated!

    Warm regards

    SADOCS

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter sadocs

    (@sadocs)

    I also tried the shortcode [table id=(insert id here) responsive=collapse /]

    Thread Starter sadocs

    (@sadocs)

    I think I have narrowed it down to those tables that contain a lot of information in one of the columns. For some reason this causes the JavaScript features not to function, including the horizontal scrolling, the table information display, etc.
    Is there any way to fix this, since I do not have control over how much data gets put into a column?

    Thank you

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Most likely it’s not the amount of information, but some invalid HTML code, for example.
    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter sadocs

    (@sadocs)

    Hi @tobiasbg

    Thank you for getting back to me. One of the pages can be accessed here . Should I send you all of the pages with this problem? Like I said, some of the tables collapse as instructed, while others don’t.
    I truly appreciate your assistance!

    Warm regards
    SADOCS

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for the link! That helps already.
    There are two issues here:

    First, two of the tables on this page only have one row. Unfortunately, this means that the JavaScript features (including the collapse mode) can not be used with these tables. The external JavaScript library that is used for these features requires a table with at least one header and one body row.
    For these two tables, that’s not the case, so that a JavaScript error happens, which then results in the browser stopping the execution of JavaScript entirely.
    So, you’d have to make sure to only use the JS features on tables with at least two rows.

    The second issue is more about the layout: As your tables are hidden inside expandable section, this means that the JS library will not be able to make certain calculations (like columns widths, etc.) when the page is loaded. Due to that, the column widths will seem off, between the body and header cells. Unfortunately, this will likely mean that you won’t be able to show the tables in these expandable sections.

    Regards,
    Tobias

    Thread Starter sadocs

    (@sadocs)

    Hi

    Thank you very much, this is very helpful!
    Just to clarify, when you say expandable section you mean the toggle or drop-down feature that views the table when clicked?

    Regards
    SADOCS

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, that’s what I meant.

    Regards,
    Tobias

    Thread Starter sadocs

    (@sadocs)

    Hi @tobiasbg

    I changed the page so that the tables are not contained in an expandable section. Instead, I just posted them directly as a shortcode. However, it still does not want to collapse.
    I’m not concerned with the tables that do not have information yet, I just want to make sure that when they do start to contain information, the table will collapse so that the information can be read.

    Regards
    SADOCS

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    for me, the first table is collapsed. For the others, the problem is this (quoted from my reply above:

    First, two of the tables on this page only have one row. Unfortunately, this means that the JavaScript features (including the collapse mode) can not be used with these tables. The external JavaScript library that is used for these features requires a table with at least one header and one body row.
    For these two tables, that’s not the case, so that a JavaScript error happens, which then results in the browser stopping the execution of JavaScript entirely.
    So, you’d have to make sure to only use the JS features on tables with at least two rows.

    The table will be be collapsable, once the tables have at least two rows.

    Regards,
    Tobias

    Thread Starter sadocs

    (@sadocs)

    Yes the first table collapses, and I know that those with only one row do not collapse (since the one row is the header). That’s ok, because as you said, they will hopefully collapse once more information has been put in.

    However, if you check the 4th and 5th tables, they contain 2 rows but still don’t collapse, meaning that there must be some other error?

    You can see what I mean on another post with the same initial URL but permalink /?p=4250.
    Here you will see one table with 2 rows (header and another row) that collapses accurately, but right after that there is a table with the same amount of information that does not collapse.

    I really appreciate your assistance!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    However, if you check the 4th and 5th tables, they contain 2 rows but still don’t collapse, meaning that there must be some other error?

    No, this is caused by the tables with one row. Due to that, a JavaScript error happens, which then results in the browser stopping the execution of JavaScript entirely. Thus, the following tables also don’t get the collapse feature.

    On the 4250 page, it’s the same. The third table only has one row, so that that one and all following tables don’t get the collapse feature, due to the JavaScript error.

    Sorry for not having having described that properly in my previous two replies.

    Regards,
    Tobias

    Thread Starter sadocs

    (@sadocs)

    Aaaaah, ok I see now. Thanks for clarifying that for me! And thank you for the assistance, it’s really appreciated.

    Have a great day!

    Plugin Author TobiasBg

    (@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 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Responsive Table error’ is closed to new replies.