I am trying to: display up to 5 products in a comparison table using bootstrap table
Link to a page where the issue can be seen: hidden link
I expected to see: an equal height between all products for each value in each row
Instead, I got: random sizing and misalignment in the table
to create the comparison tableI use the default Table-based grid output option
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="table-responsive">
<table width="100%" class="wpv-loop js-wpv-loop">
<wpv-loop wrap="5" pad="true">
[wpv-item index=1]
<tr>
<td>
[wpv-post-body view_template="Loop item in Rider Profile"]
</td>
[wpv-item index=other]
<td>
[wpv-post-body view_template="Loop item in Rider Profile"]
</td>
[wpv-item index=5]
<td>
[wpv-post-body view_template="Loop item in Rider Profile"]
</td>
</tr>
[wpv-item index=pad]
<td></td>
[wpv-item index=pad-last]
<td></td>
</tr>
</wpv-loop>
</table>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]wE couldn't find Bicyles matching your rider profile. Go back and try again by incresing your budget limit to increase the range of alternatives.[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
my content template has no custom css and is:
[wpv-woo-product-image size="thumbnail"]
<h2>[wpv-post-link]</h2>
<h3>[wpv-post-taxonomy type="product_brand" separator=", " format="link" show="name" order="asc"]</h3>
[wpv-post-taxonomy type="product_cat" separator=", " format="link" show="name" order="asc"]
[wpv-woo-list_attributes]
[wpv-woo-product-price]
Please advise,
thanks,
David
I tried to use the Bootstrap grid option but i see that there is a constraint on how many columns I can use.
I need 5 columns but there is no way to have only five column with this option.
in this scenario i selected a Bootstrap grid with 6 columns and restricted the view to plot only 5 results.
Also, i see that that five products display in one row however the sixth column is empty and take space on the page.
Any thoughts.
David
Hi,
I was able to solve the five columns in the Bootstrap grid using the following code:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="5" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-2 col-md-offset-1">[wpv-post-body view_template="Loop item in test bootstrap table"]</div>
[wpv-item index=other]
<div class="col-sm-2">[wpv-post-body view_template="Loop item in test bootstrap table"]</div>
[wpv-item index=6]
<div class="col-sm-2">[wpv-post-body view_template="Loop item in test bootstrap table"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-2"></div>
[wpv-item index=pad-last]
<div class="col-sm-2"></div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]wE couldn't find Bicyles matching your rider profile. Go back and try again by incresing your budget limit to increase the range of alternatives.[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
now the issue at hand is the equal height among columns.
Please advise,
thanks,
David
Divi is not compatible with the Bootstrap CSS framework, which Toolset uses by default.
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/
If you want to use Toolset Bootstrap, we recommend to not use DIVI Theme.
HI Beda,
The title of this support ticket is wrong, i guess i overlooked it and put the theme name i'm using in the title of the ticket (maybe if you can change the title).
The issue is not with divi loading bootstrap. I load bootstrap using "Toolset should load Bootstrap 3.0" with no issues using divi.
The issue at hand is that I use 'Bootstrap grid' in a view and the results I get are not equal in height for each item in the table so the table columns height is random and not aligned.
any thoughts?
David
The issue at hand is that I use 'Bootstrap grid' in a view and the results I get are not equal in height for each item in the table so the table columns height is random and not aligned.
You can specify a fixed height for all the loop items using CSS, and set the overflow to be hidden, something like this:
.row > div {
height: 400px;
overflow: hidden;
}
You'll have to make adjustments to the height so that your content is visible, and you can add media queries to remove the height and overflow properties at small resolutions (where each item is on a separate row and fixed heights are not important).
I'd like to follow up on what Beda said, because I think it's important for you to understand. The issue with Divi and Bootstrap is not that there are technical problems loading the Bootstrap library. The problems occur because Divi and Bootstrap use the same CSS class names in some cases, and this can cause unexpected selector clashes and conflicts. You should be aware of this if you are going to use Bootstrap and Divi together, which we do not recommend.
Thanks Christian,
that didn't solve the issue.
instead i have edited the content template to look like this:
<div style="height: 150px";>
[wpv-woo-product-image size="thumbnail"]
</div>
<div style="height: 80px";>
<h2>[wpv-post-link]</h2>
</div>
<div style="height: 80px";>
[product_brand width="64px"]
</div>
<div style="height: 80px; text-align: center;">
Bike Chooser score:
<br>
<h2>[types field='bike-score' format='FIELD_VALUE'][/types]</h2>
</div>
<div style="height: 30px";>
[wpv-post-taxonomy type="product_cat" separator=", " format="link" show="name" order="asc"]
</div>
<div style="height: 80px; text-align: center;">
[wpv-woo-product-price]
</div>
it semi solve the issue as when i resize the browser window to simulate a small screen or use a mobile device to access the page the product image covers the other information and the user can not see it.
not sure how to solve this.
any thoughts?
David
Not sure offhand, but you'll probably have to use CSS media queries to modify the height of the image div at different screen sizes.
https://css-tricks.com/css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Thanks i almost got it,
if there is a way to create some space between the columns in the Bootstrap grid,
David
I would create a wrapper div that has some right and left padding, and insert that wrapper div in each loop item. Something like this:
<div class="col-sm-2">
<div style="padding-right:5px; padding-left:5px;">
// The rest of your contents go here
</div>
</div>
That way you're not modifying the actual Bootstrap grid structure, you're just modifying the spacing around each item's contents. Apply any background treatment to the div with padding, not the div with the col-sm-2 designation. It will appear that the columns have more space between them.
Thanks,
that solved the issue.
David
