[Resolved] Create a responsive comparison table

[Author]

Posts

[davidZ-4]

Tell us what you are trying to do? Create a responsive comparison table of products similar to the enclosed image

Is there any documentation that you are following?
https://toolset.com/documentation/user-guides/creating-side-by-side-feature-comparison-with-views/
https://toolset.com/learn/create-an-ecommerce-wordpress-site/product-comparison/#comparison-results
hidden link

Is there a similar example that we can see? https://toolset.com/forums/topic/creating-a-comparison-table-from-posts/

What is the link to your site? hidden link

i tried using the view loop wizard with "table-base grid" and "Bootstrap grid" but i'm missing somthing to make this table responsive and the rows aligned.

Please advice,
thanks,

David

[Shane]

Hi David,

Thank you for contacting our support forum.

When you say responsive table is it that you want the items to flow below each other ?

Please let me know.
Thanks,
Shane

[davidZ-4]

Hi Shane,

responsive table means that when i view the table on small screen the table does not brake and the page resize user experience (UX) is not to scroll all the page to the right or left, rather the table have horizontal scroll bar to view the items n the table.
an example of bootstrap responsive table can be found here hidden link

the thing that i don't understand well is how the view loop render the products in columns for comparison. and how that can be inserted into a template of a boot responsive table.

Please let me know if you have questions.
thanks,

David

[Shane]

Hi David,

Thanks for the clarity,

Would you mind providing me with admin access so that I can take a further look at this for you ?

The private fields will be enabled for your next response.

Thanks,
Shane

[Shane]

Hi David,

Thanks have a look now hidden link

It should now be working with the scroll bar.

Please let me know if this helps.

Thanks,
Shane

[davidZ-4]

Thanks Shane,
yes this is good!
Just couple of other questions on this topic:

1.Was it just letting toolset to load bootstrap or was there something else you changed? i.e. how did you resolve the responsive table issue?

2. how can I get the lines in the table be aligned in the same height between all products?

Thanks,

David

[Shane]

Hi David,

I actually did 2 things.

The first I did was to add the bootstrap response table div

      <div class="table-responsive">
Table code goes here.
</div>

The second thing I did was to enable the bootstrap loading by going to Toolset->Settings->Bootstrap Loading.

I checked and its because of how the table is built and might be a limitation of the table when it comes to the comparison because of how its currently built.

Ideally each section i.e image, taxonomy and price should all be in a different row but they are currently in the same row. I dont suspected that there is anything that we can do about this.

Thanks,
Shane

[davidZ-4]

ok,
got it,
thanks,

David