| Author |
 Topic  |
|
|
jbutt
VP-CART New User
USA
56 Posts |
 Posted - May 26 2015 : 11:17:22
|
I noticed some discrepancies with the height of the products in grid view. The height of all the products would be equal to the tallest one on screen. This would create some odd sizes if you have one product with lots of text or larger image. Even if the differences weren''t that much, the frame might sometimes extend lower than the rest of the row.
Here are some changes I made that makes each row''s height match the tallest one IN THAT ROW ONLY.
in the responsive (located under the folder common/responsive), replace function min_widget_grid_height(product_widget) with the following code. It might need some tweeking but works so far.
function min_widget_grid_height(product_widget){
var product_widget_height = 0,
current_row_Position = 0,
current_widget_Position = 0,
rowWidgets = new Array ();
$(product_widget).each(function(){
current_title_height = parseInt($(this).height());
current_widget_position = parseInt($(this).offset().top);
if (current_row_Position != current_widget_position){
for (currentWidget = 0; currentWidget < rowWidgets.length; currentWidget++) {
rowWidgets[currentWidget].height(product_widget_height);
}
rowWidgets.length = 0;
current_row_Position = current_widget_position;
product_widget_height = $(this).height();
rowWidgets.push($(this));
} else {
rowWidgets.push($(this));
if(current_title_height > product_widget_height){
product_widget_height = current_title_height;
}
}
for (currentWidget = 0; currentWidget < rowWidgets.length; currentWidget++) {
rowWidgets[currentWidget].height(product_widget_height);
}
});
}
John |
|
|
support
Administrator
4679 Posts |
|
|
jbutt
VP-CART New User
USA
56 Posts |
Posted - May 07 2016 : 02:58:39
|
Thanks Wilson,
I know this has been a while but I was tinkering with the code you provided which is now included in the latest update but I run into a problem which may not affect most users.
Some of my products might have more information to list under the image. If this is the case, lets say one item has a height of 800px (exaggeration), then every other widget will be the same height regardless of the row they are in.
I find that by simply replacing the function min_widget_grid_height with the following text, each row''s height will match only the tallest widget within the group.
function min_widget_grid_height(product_widget){
product_widget_height = 0;
current_row_Position = 0;
current_title_height = 0;
current_widget_Position = 0;
rowWidgets = new Array ();
$(product_widget).each(function(){
current_title_height = parseInt($(this).height());
current_widget_position = parseInt($(this).offset().top);
if (current_row_Position != current_widget_position){
for (currentWidget = 0; currentWidget < rowWidgets.length; currentWidget++) {
rowWidgets[currentWidget].height(product_widget_height );
}
rowWidgets.length = 0;
current_row_Position = current_widget_position;
product_widget_height = $(this).height();
rowWidgets.push($(this));
} else {
rowWidgets.push($(this));
if(current_title_height > product_widget_height){
product_widget_height = current_title_height;
}
}
for (currentWidget = 0; currentWidget < rowWidgets.length; currentWidget++) {
rowWidgets[currentWidget].height(product_widget_height);
}
});
}
This may help if you have many varying heights which I''m sure is not the common store.
Regards,
John |
 |
|
|
serjtankian
VP-CART Super User
Armenia
378 Posts |
Posted - May 07 2016 : 23:46:03
|
Great share John!
- Peace, Serj -
*serj* |
|
|
| |
Topic |
|
All Forums
Same Height in Product Rows
New Topic
Printer Friendly
TrustGuard - PCI Security Scanner
