Responsiveness

Hi,

thanks for your post, and sorry for the trouble.

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,
Responsiveness seems to be the next big beast in Revelation. Google has become very “responsive” to rigid sites, so I am about to redesign a site to be flexsible within Thesis 2 and Pearsonified.
Take the chance and join here under the right heading.

The site I am working with contains rather simple tables.
(The plugins TablePress and Responsive Tables are included.)
(Nothing in production yet.)
Problem:
Even if Table 4 is a simple table with 4 columns and a few lines – no fancy stuff from the second menu – it hehaves strangly when the parameter: responsive=”all” is set. And … in no incident has it been readable with the minimizing I can obtain with the Chrome browser on a PC.
(Apparently IE is out of the question (why?), so I have tested with Chrome.)
Here are a few screenshots:
Table 4 as NORMAL, “responsive” not set: https://screencast.com/t/3FLulWbVCCq Table 4 with “responsive all” set: https://screencast.com/t/QGX52n0KP
The table calls embedded in Text-view: https://screencast.com/t/Ed98GwbxV
Is there a prayer for this?
Regards,
Eigil

Hi,

thanks for your question, and sorry for the trouble.

Yes, you are right about responsiveness here. Unfortunately, making tables responsive on the web is one of the tougher things, due to how they work in the browser, with their fixed structure and everything. (For some background on this, please see https://css-tricks.com/complete-guide-table-element/ ).

One idea for adding responsiveness is the Responsive Tables Extension, which implements one appraoch that works on many tables that contain e.g. numeric data. It flips the table and makes is horizontally scrollabe.
(Unfortunately, IE has some technical difficulties with how this is done, which is why the Extension does not work with IE yet.)
As that way is rather hacky, it can not detect all things in a table, for example if the header row contains two lines of text, while the body cells contain only one (like in your example). This leads to the problem that you describe. To change this, one basically has to manually set a row height, using some CSS code. To find that CSS code, I’d however need to directly see the page with the table where this happens, a screenshot is not enough for that.

An alternative would be to not use the Extension, but to use an approach that only adds horizontal scrolling (without the flipping). For that, please see https://www.ads-software.com/support/topic/responsive-tables-scroll-only?replies=6#post-5511954

Regards,
Tobias

Hi Tobias,
Thank you for the perspective. I think the horisontal scrolling is a fair solution to at complex problem.
Another question: I have been loking for at complete list from instructions to the .tablepress call, preferable with a line or two of explanation to each. Does it exist? I have been fishing here and there, but is still missing the instructions for dimentioning a table(the total table) and for its horizontal justification (left – center – right) within the outer borders.

Thank you also for your pleasant and timely service.
Kind regards,
Eigil

Hi,

good to hear that this helped! Yes, horizontal scrolling is very powerful!

Regarding that other question:
I don’t have a list of all the possibilities for that .tablepress CSS class, and the reason simply is that this is all standard CSS code. That means that you can take a look at any CSS tutorial or reference here, they will all be helpful. Good ones are at https://www.w3schools.com/cssref/ and https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

And thanks for your donation, I really appreciate it!

Regards,
Tobias

Hi Tobias,
Thank you for the references. I have rated TablePress as you suggested (not really knowing what I am talking about – yet). I had to leave space for improvement, but overall your product is impressing.
Kind regards,
Eigil Skovgaard

Hi,

sure, you are very welcome! And thanks for the review, I really appreciate it!
Good to hear that you like TablePress. I replied with some more info to you review.

Best wishes,
Tobias