Infinite scroll layout not looking good

-- url of the page with the problem -- : accademiainfinita.it/shop
-- HikaShop version -- : 3.5.1
-- Joomla version -- : 3.8.10

Hello,
when I activate the infinite scroll, it leaves blank spaces amongst the loaded product boxes,
you can test here accademiainfinita.it/shop

my configs
categories: nimb.ws/y7r5fn
products: nimb.ws/5b7sXI

thank you

Hello,

The issue is not related to the infinite scroll but to the fact that one product name is too long (two lines).
So you have to activate the consistency height feature to handle that.

Regards,

I understand, but the height consistency is already activated as you can see in the screenshot I posted: nimb.ws/5b7sXI

The issue is due to this dynamic style value


After regenerating the menu item and refreshing the page, the value is now created correctly and there are no more blank spaces,
before it was 182px instead than 295px.
I don't know if it's some kind of bug, I cant reproduce the issue now.
Will let you know if it happens again.

Thanks

Hello,
I am still having this issue here accademiainfinita.it/shop
"height consistency" is already set on "YES" for this menu item.
I dont' think it's a cache issue either, because deleting the Joomla cache doesn't solve it.
If you could investigate that would be great.
Thanks

Hello,

In your "custom_24" CSS file you changed some rules for the images in your listing.
There is no more a "height" for the images ; which are not in "height auto" and "override hidden".
Because of that, when the processing of the "consistency height" is performed, the images have 0px height and the processed dimension is 184px height.
Once the image loaded, the tile become 148px bigger and the processed height is useless.

Now you can see to fix your CSS and not override the height that HikaShop is setting ; or you can see to tweak the infinire scrool / consistency height integration in the "product / listing_div" view. You can, for example, see to put a timeout action to call the setConsistencyHeight function after the image are finally loaded by the user.

Regards,

Tank you for the tips,

maybe this solution would be more elegant

You can, for example, see to put a timeout action to call the setConsistencyHeight function after the image are finally loaded by the user.

but I have no idea on how to do it.

I am trying to fix the css instead. The reason why I tweaked it in the first place is that if I leave Hikashop css rules, there is an extra space being added below my images



and on mobile they don't look good either (there is space added on the left and right side)



It seems to me that Hika would force me to use images that have certain proportions, if I don't I need to tweak the css but this causes the layout issue with the infinite scroll height consistency

Could you suggest a css solution that works well for all the different devices?
My images should look like this (without top/right/left padding)



Or could you tell me exactly how to implement the other solution you were suggesting?

Thank you

Hello,

but I have no idea on how to do it.

Doing it like this will probably do the job :
Best regards,
Mohamed Thelji.