After couple of days of "digging" here is what I found:
- All products on the page are displayed under <div class="hk-row-fluid"> and have float:left style, i.e. browser is in charge of breaking rows based on the individual product image/box sizes and overall layout width.
- Product images are resized to have identical width, however if the original size of the images is different, there will be difference in the height of the thumbnails.
- Additional height difference can be caused by the length of product name, which can fit into 1 line, or occupy 2 or more lines.
- All of the above causes the boxes representing different products to have different heights. The difference may be just a few pixels, but it affects the placement of the products in the next row.
Rendering starts from the right and then product tries to "float" left. Let say we have 4 products in the 1st row and the box containing the 2nd product is taller then boxes with 3rd and 4th product. Then the 5th product (1st in the 2nd row) will get "stuck" under product 3 when trying to float left, because the bottom of product 2 will be on its way. The snapshots posted by brendanlanza and me clearly depict this.
There should be a way to calculate and unify the box heights while building the page, but due to lack of time I did not make a "deep dive" into the code. Instead I wrote a JavaScript function that runs after page rendering. It scans all the product boxes on the page and finds the tallest one. Then it forces all boxes to have that height. This fixes the issue, however the same function needs to be executed if user resizes the browser window.
This workaround is definitely far from being perfect, but I decided to post it in case somebody else is experiencing the same issue. JavaScript can be added anywhere, not necessarily to Hikashop file.
<script type="text/javascript">
(function($){
$(window).load(function(){
var l = $('[class^="hkc-md-"]');
var h = 0;
var t = '';
$.each(l, function (i,d) { if (d.clientHeight > h) { h = d.clientHeight; } });
$.each(l, function (i,d) { t = 'div.' + d.className.replace(/ /g, '.'); $(t).height(h); });
})})(jQuery);
(function($){
$(window).resize(function(e) {
window.resizeEvt;
$(window).resize(function() {
clearTimeout(window.resizeEvt);
var l = $('[class^="hkc-md-"]');
var t = '';
$.each(l, function (i,d) { t = 'div.' + d.className.replace(/ /g, '.'); $(t).height("auto"); });
window.resizeEvt = setTimeout(function(){
var h = 0;
$.each(l, function (i,d) { if (d.clientHeight > h) { h = d.clientHeight; } });
$.each(l, function (i,d) { t = 'div.' + d.className.replace(/ /g, '.'); $(t).height(h); });
}, 300);
});
});
})(jQuery);
</script>
Thanks.
Best regards,
B.G.