Tablepress Not Working with Divi Theme – Problem with Tabs

Hi,

thanks for your post, and sorry for the trouble.

The reason for this is how JavaScript and the browser interact here, on hidden elements in the tabs. As only the currently active tab is actually rendered/displayed by the browser, the other ones can not really be worked with by the JavaScript code. Specifically, it can not properly calculate widths and heights.
Now, one way around this might be to turn off the “Horizontal Scrolling” checkbox for each table, as that seems to have the biggest impact from what I know. (You can however re-create the same effect with plain CSS afterwards.) Unfortunately, this is not a guarantee, and I have seen cases where the only fix was to turn off the “Use DataTables” checkbox entirely.

Regards,
Tobias

Thanks very much for trying to help with this, Tobias. The purpose of using this otherwise excellent plugin is so that the table shows only as many columns as fit in the responsively sized area, so turning off horizontal scrolling defeats the objective of the installation.

I will have to write a note to the user telling them, ‘Please click on the header to activate the table’.

Best wishes,

John.

Hi John,

no, hold on. As mentioned, we can easily add Horizontal Scrolling again, just via CSS. But first we’ll have to find out if unchecking the checkbox, or maybe even the “Use DataTables” checkbox helps here.

Regards,
Tobias

Thanks, Tobias. When I deselect ‘Use Data Tables’ then the size of the tab box is indeed correct, but of course the table appears in full and therefore extends well outside of the box, but this time to the right.

To see this effect, please visit the page again and click on the ‘Rongai’ tab under Advantage Series prices, ie. the first pricing table you come to, and the first hidden tab.

If this is the desired intermediate result prior to adding the correct CSS code myself, then would you please advise me what to paste into the CSS and where to paste it?

Many thanks,

John.

Hi John,

yes, that’s what I had hoped for. Does the same happen if you only uncheck the “Horizontal Scrolling” checkbox, but leave “Use DataTables” checked? That way, you could still use the sorting and filtering, if desired.

Now, as the alternative for that Horizontal Scrolling, I had hoped that a plain CSS solution will work, but in my quick tests, it didn’t. That’s still ok, as you can now still use the scroll mode of the Responsive Tables Extension from https://tablepress.org/extensions/responsive-tables/ which also adds horizontal scrolling.

Regards,
Tobias

Thank you so much, Tobias.

I am very content with the result, although it is not quite perfect because now the Fixed Column extension code is not working!

But never mind, this is a less important detail than the main issue and I am very grateful for your help.

Best wishes,

John.

Hi John,

yeah, the FixedColumn Extension basically suffers from the same problem as the original Horizontal Scrolling, as it uses the same technical mechanism. :-/

And thanks for the donation, I really appreciate it!

Best wishes,
Tobias

Thank you, Tobias.

Nonetheless, the plugin has solved a very annoying problem for me and now allows me to load all my pages in responsive mobile mode.

You are most welcome for the small gesture.

Best wishes,

John.

Hi John,

thanks, that’s nice to hear!

Best wishes,
Tobias

Hi Tobias,

I am seeing something similar.

I disabled horizontal scrolling and have the responsive plugin. But only see the +/- option in the table which opens by default. The second table however, is now visible isn’t responsive.

Is there anything else i can do to ensure that both the responsive tables look good.

Also, i noticed that the last column of the responsive table is generally not complete and gets cut partially. Noticed the same on your site with the test table.

Thanks and regards,
klypy

Hi klypy,

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

Hi Tobias,

Please see this link: https://www.zatalyst.com/patents/

Regards,
klypy

Hi,

thanks for the link. The problem here most likely is that you are loading the tables in tabs, which unfortunately leads to some problems, as the DataTables JS library can not properly calculate the width of the table and the columns (because one of them is initially hidden).

Your best chance here should therefore be the scroll mode of the Extension :-/

Regards,
Tobias

Hi Tobias,

I have enabled the scroll mode. Personally i like the collapse mode better but unfortunately doesn’t work as good.

Thanks,
Klypy

PS: Can you please change the link in my earlier post to this (https://bit.ly/1Q7z8om) bitly link. I had intentionally given a bitly link to ensure that the website link profile we build is relevant. It will be great if you can keep the original link submitted.

Hi Klypy,

yes, that will be the best way here.

About that link: I’m afraid that this is beyond my powers here in the forums, as I’m not a moderator and don’t have the necessary access rights to modify earlier or other users’ posts (thus, I also didn’t modify your link in your first post). Sorry ??

Regards,
Tobias