TablePress Responsive Plugin Issues

  • Resolved ma3ry

    (@ma3ry)


    10 years, 4 months ago

    First let me thank you for a wonderful plugin. I have used TablePress now on a few of my websites and been really happy with it, and so when I saw that you had a responsive plugin to go with it I did not hesitate to make a donation. Unfortunately I can’t get the responsive plugin to work for me. In fact when i change the page from [table id=1/] to [table id=1 responsive=”all” /] it totally screws up the whole page.

    I have tried going back to [table id=1/] but even after dumping cache and history the mess remains. I have re-created the table from scratch using the basic table code without the responsive plugin but it is still a mess.

    I’ve tried some of the things I’ve seen in the forums like including column_width and padding in the Plugin Options and also within the code on the page but I still cannot get this to work.

    One example is at https://awesomewebsites4u.com/siding/ This page used to have three columns with pics in columns 1 & 3 and text (with pic under) in column 2.

    Can you help please. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi,

    thanks for your post, and sorry for the trouble.

    The reason for these issues is some extra HTML code (this might actually also be the reason for the gray background color issue from the other thread).
    Namely the Shortcode is wrapped in HTML <pre> tags. To fix this, please go to the “Edit” screen of the page, and switch from the “Visual” to the “Text” editor.
    There, remove the <pre> and </pre> around the Shortcode, so that there’s only the Shortcode on its own line, with an empty line before and after it.

    Regards,
    Tobias

    Thread Starter ma3ry

    (@ma3ry)

    Thank you.

    This fixed the gray background issue but the pages/tables are still screwed up on the ones that use the responsive plugin code.

    See https://awesomewebsites4u.com/siding/
    https://awesomewebsites4u.com/eavestroughs-gutters/

    although the decks page https://awesomewebsites4u.com/decks/ is responsive and looks OK. Perhaps it has something to do with the fact that it has two columns and the others have three?

    Hi,

    well, the responsiveness approach of the Extension is working technically. It’s jus not an approach that is well suited for your tables, which mainly show images in the tables.

    If you look at the example on the page https://tablepress.org/extensions/responsive-tables/ you can see that the table is flipped to the side and made scrollable. This works very well for tables with text or numbers in them, as those don’t take up much space and all have the same size. The approach of flipping&scrolling does however not work well in cases like yours, with images in the cells that result in different row heights.

    The difference between the siding and decks pages basically is the different Shortcode parameter value (all instead of phone).

    Now, as your tables contain images, I’d like to suggest a different solution: Let’s only use Horizontal scrolling, without the flipping.
    For that, please remove the responsive parameter from the Shortcodes again (use the text editor not not accidentally add those <pre> tags again), and then try this:

    Add an extra <div> wrapper around the Shortcode, like

    <div class="tablepress-scroll-wrapper">
[table id=123 /]
</div>

    and then add this to the “Custom CSS”:

    .tablepress-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

    Regards,
    Tobias

    Thread Starter ma3ry

    (@ma3ry)

    Many, many thanks!!!!! This works perfectly! I can’t thank you enough!

    Hi,

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

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘TablePress Responsive Plugin Issues’ is closed to new replies.