Hi,
thanks for your question, and sorry for the trouble.
I’m not sure what you mean here. Can you maybe post a screenshot?
Regards,
Tobias
Thread Starter
ricmo
(@ricmo)
Sure thing, here you have an example. As you can see, the right margin of the table goes too father and doesn’t follow the normal margins of the page (but only the right side).
View post on imgur.com
Hi,
does it still show like that when you reload the page within the same sized screen/browser window?
Regards,
Tobias
Thread Starter
ricmo
(@ricmo)
Hi,
Yes I’ve tried it on my iPhone and also using Chrome’s inspector. Always same issue. Can you see it on your end?
Hi,
no, this is not what I see in the Chrome Inspector (or rather the mobile simulator). Everything looks correct there.
Don’t forget to reload the page after enabling it or after changing the phone models in the simulator so that the collapse mode JavaScript can run.
Regards,
Tobias
Thread Starter
ricmo
(@ricmo)
Strange. When using the inspector on an iPhone 6S, it looks fine, but for iPhone 6 or 5, I can see the error mentioned above.By the way, I can also see the error on my real iPhone 6 (using Safari).
Do you see everything properly for those models?
I also saw another issue, even more problematic. There are two tables on that same page. Exact same formats and shortcodes but the 2nd one it looks pretty bad:
Views
Hi,
ah, indeed, it doesn’t show the same for all models :-/
Unfortunately, I don’t really have a solution to this, as this is all based on the DataTables Responsive add-on, i.e. the JavaScript code was not developed by me, but only packaged for TablePress.
The problem might be that the content in your table is not very uniform, i.e. there are images (that can even resize), there is large text blocks, and small data fields. This makes it hard for the algorithm to properly determine what to show.
Regards,
Tobias
Thread Starter
ricmo
(@ricmo)
I hear you, I tried to make both look even more alike but the collapse still looks different.
Anyway, back to the original issue, any idea what could I do to make sure the table doesn’t exit the post’s margins when responsive?
Hi,
you could maybe try adding this “Custom CSS”:
.tablepress-id-2 {
width: 100% !important;
}
Regards,
Tobias
Thread Starter
ricmo
(@ricmo)
This seems to work Tobias, thanks!
It just sucks that I couldn’t find a solution for the collapse responsive issue. Tried many things and both tables have virtually the same format but still nothing…
Any idea if I can ask someone to customize which columns get collapsed?
Thanks!
Hi,
yeah, I know that this is not satisfying. Unfortunately, debugging this JS code is kind of hard 🙁
For the customization: That’s not trivial and will require adding custom CSS classes to columns, via JavaScript. The example at https://ww.wp.xz.cn/support/topic/defining-columns-to-collapse-1?replies=12 might be a good starting point.
Regards,
Tobias
