Hi,
thanks for your post, and sorry for the trouble.
The reason for this probably is that the JS code simply takes a few moments to process and calculate the width of columns, etc.
It might however be possible to at least not let the table over-run on the right side, by wrapping it in an extra <div>
container, like
<div style="overflow:hidden">[table id=123 /]</div>
For the problem on mobile: This should not happen and likely means that something is causing a script error. In general, the full table will be loaded here as well, but then the pagination should be added, just like on the desktop.
Regards,
Tobias
Thread Starter
Essie
(@de-webconnectie)
Hi Tobias,
The table loads a lot better now on my desktop! Thanks
This script error, is this related to my specific phone?
Regards,
Ester
Hi Ester,
that’s good to hear!
No, that script error is probably the result of some other JavaScript file on the page. 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
Essie
(@de-webconnectie)
hi Tobias,
This is the link: http://www.dewebzandbak.nl/voor-clubleden/
thanks for taking a look
Hi,
thanks for the link! I checked the page in the simulators in Chrome as well as on my Android phone. While it took a few moments to load and execute everything, the pagination worked just fine, after finishing loading.
Regards,
Tobias
Thread Starter
Essie
(@de-webconnectie)
I see it now too, it just takes quite a while. Thanks for assisting!
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Yes, it just takes some time to process a big table on a phone :-/
Best wishes,
Tobias
Thread Starter
Essie
(@de-webconnectie)
Hi Tobias,
What would be a general css for all future tables to have hidden overflow?
Thanks!
Hi,
I’m afraid that that’s not easily possible as the tables don’t have a wrapper <div>
by default.
You could however add one with this piece of PHP code in your theme’s “functions.php”:
add_filter( 'tablepress_table_output', 'tp_add_overflow_hidden_wrapper', 10, 3 );
function tp_add_overflow_hidden_wrapper( $output, $table, $render_options ) {
$output = "<div class=\"tablepress-overflow-wrapper\">\n{$output}\n</div>";
return $output;
}
and then use “Custom CSS” like
.tablepress-overflow-wrapper {
overflow: hidden;
}
Regards,
Tobias
Thread Starter
Essie
(@de-webconnectie)
oke… I’ll do that
Thanks 🙂
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!