[Resolved] How do I make a tb-grid responsive while maintaining structure?
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
I'd like to work out how to improve the look of a series of tables I've built using tb-grid.
My grids are populated via a CPT and then displayed in a view.
I have to allow ten columns to accommodate a range of different data that the template will be used for.
Recently Waqar helped me resolve an issue with hiding unfilled cells by writing JS. The only downside being that tables which have fewer columns do not fill the container.
A more pressing problem is what happens when the table is viewed on other devices. It's not at all pretty.
At the very least, I'd like to be able to have horizontal scroll, but have not yet worked out how best to do that.
Is there any documentation that you are following?
Is there a similar example that we can see?
I've attached images of various table so you can see what happens.
Thank you for contacting us and I'd be happy to assist.
Reviewing the screenshots, the use of Toolset Grid for a comparison table layout like this doesn't seem like a good idea.
Can you please share temporary admin login details, along with the link to an example page with this comparison table view? I'll be in a better position to suggest an alternative, after understanding the source for these columns.
Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.
As you're using the repeatable field group entries, to generate each row in the comparison table, it would be more intuitive to generate the actual table mark up using the classic/legacy view.
You'll find a new example view "View to show the related Table rows" that I've created for this at WP Admin -> Toolset -> Views. Here is the code that is being used in the view's loop editor:
Oh WOW! That's fantastic!
So, did you just write that especially?
A quick question: What decides the column widths? Some of the columns are narrow so that the text breaks and if that an be remedied That would be great!
The width of the table columns (except for the first one for the logo) are getting set automatically, based on the content available inside them.
As the first column's usage and position are expected to be the same and it will always be used for the image logo, you'll note that I've added a class "logo-cell" to its "td" tag:
( screenshot: hidden link )
And then, through the custom CSS code, minimum width of 10% is assigned to this column.
( screenshot: hidden link )
If you'd like to set a fixed minimum width for any other column, you can repeat the same for that column too.
Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors: https://toolset.com/contractors/