Hi,
I integrated JLex Review with Virtuemart, and implemented the modification as suggested back in May (see attached screenshot), on /com_virtuemart/sublayouts/rating.php , which functionally works great, however after various investigations, it appears to be messing with the CSS product preview box height, making the product thumbnail image cut out at the bottom. Could you please help, I have been investigating it but cannot find the solution yet.
See attached screenshot_01:
- Go to www.andkit01.com/en/test-category-1/
- On Chrome, select the Inspect panel, for the product-preview__image object (highlighted on the screenshot, near label B )
- Reload the page (press F5), so that it represents the initial page load state.
- Screenshot label B: You will see that the bottom part of the Koala image is cut off.
- Label C: The "margin-bottom:80px" is set by a javascript (custom.js) on product-preview__image object, based on the height of product-preview__info class object (label F). For some reason, the calculated product-preview__info object height does not take into account the jreview-quick-star class object height 55px (label D).
Now if you adjust the browser window size, the script custom.js is called again, and the jreview-quick-star class object height 55px is now taken into account, giving "margin-bottom:135px".
See screenshot_02 attached:
- Label B: The Koala image is now correctly displayed
- Label C: "margin-bottom:135px" now takes into account the jreview-quick-star class object (80px + 55px = 135px).
If you reload the page again (press F5), the first time the page loads will again show incorrect "margin-bottom:80px" that does not take into account the jreview-quick-star height 55px. If you adjust the browser window, it will then adjust and correct it, and will remain corrected.
It seems that there may be an issue with the CSS ordering/cascading, where the first time the page loads, for some reason the jreview-quick-star height is not part of product-preview__info object height. Could you please help. Let me know if you'd like me to provide FTP access.
Fyi, the function in custom.js that computes the "margin-bottom:80px" and "margin-bottom:135px" for product-preview__image object is:
function setProductHeight() {
$j('.product-preview').each(function() {
var infoH = $j(this).find('.product-preview__info').outerHeight();
$j(this).find('.product-preview__image').css({
'margin-bottom': infoH + 'px'
})
});
}
Thank you very much in advance.
I integrated JLex Review with Virtuemart, and implemented the modification as suggested back in May (see attached screenshot), on /com_virtuemart/sublayouts/rating.php , which functionally works great, however after various investigations, it appears to be messing with the CSS product preview box height, making the product thumbnail image cut out at the bottom. Could you please help, I have been investigating it but cannot find the solution yet.
See attached screenshot_01:
- Go to www.andkit01.com/en/test-category-1/
- On Chrome, select the Inspect panel, for the product-preview__image object (highlighted on the screenshot, near label B )
- Reload the page (press F5), so that it represents the initial page load state.
- Screenshot label B: You will see that the bottom part of the Koala image is cut off.
- Label C: The "margin-bottom:80px" is set by a javascript (custom.js) on product-preview__image object, based on the height of product-preview__info class object (label F). For some reason, the calculated product-preview__info object height does not take into account the jreview-quick-star class object height 55px (label D).
Now if you adjust the browser window size, the script custom.js is called again, and the jreview-quick-star class object height 55px is now taken into account, giving "margin-bottom:135px".
See screenshot_02 attached:
- Label B: The Koala image is now correctly displayed
- Label C: "margin-bottom:135px" now takes into account the jreview-quick-star class object (80px + 55px = 135px).
If you reload the page again (press F5), the first time the page loads will again show incorrect "margin-bottom:80px" that does not take into account the jreview-quick-star height 55px. If you adjust the browser window, it will then adjust and correct it, and will remain corrected.
It seems that there may be an issue with the CSS ordering/cascading, where the first time the page loads, for some reason the jreview-quick-star height is not part of product-preview__info object height. Could you please help. Let me know if you'd like me to provide FTP access.
Fyi, the function in custom.js that computes the "margin-bottom:80px" and "margin-bottom:135px" for product-preview__image object is:
function setProductHeight() {
$j('.product-preview').each(function() {
var infoH = $j(this).find('.product-preview__info').outerHeight();
$j(this).find('.product-preview__image').css({
'margin-bottom': infoH + 'px'
})
});
}
Thank you very much in advance.