[Skip to main content](#vessel-content) # Infinite scroll layout not looking good ## - **[oloccina](/forum/user/23273-oloccina "View oloccina's Profile")** - [![oloccina's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar23273.jpg)](/forum/user/23273-oloccina "View oloccina's Profile") Topic Author - [ Offline](/forum/user/23273-oloccina) Less More - Posts: 224 - Thank you received: 8 - - 8 years 3 months ago [\#295882](#295882) by [oloccina](/forum/user/23273-oloccina "View oloccina's Profile") *[Infinite scroll layout not looking good](/forum/26-product-category-display/895354-infinite-scroll-layout-not-looking-good#295882 "-- 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")* was created by *[oloccina](/forum/user/23273-oloccina "View oloccina's Profile")* -- url of the page with the problem -- : [ accademiainfinita.it/shop](https://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](https://accademiainfinita.it/shop) my configs categories: [ nimb.ws/y7r5fn](http://nimb.ws/y7r5fn) products: [ nimb.ws/5b7sXI](http://nimb.ws/5b7sXI) thank you Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUzNTQtaW5maW5pdGUtc2Nyb2xsLWxheW91dC1ub3QtbG9va2luZy1nb29kP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26394 - Thank you received: 4078 - - [](http://obsi.dev) - 8 years 3 months ago [\#295883](#295883) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Infinite scroll layout not looking good](/forum/26-product-category-display/895354-infinite-scroll-layout-not-looking-good#295883 "-- 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, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUzNTQtaW5maW5pdGUtc2Nyb2xsLWxheW91dC1ub3QtbG9va2luZy1nb29kP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[oloccina](/forum/user/23273-oloccina "View oloccina's Profile")** - [![oloccina's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar23273.jpg)](/forum/user/23273-oloccina "View oloccina's Profile") Topic Author - [ Offline](/forum/user/23273-oloccina) Less More - Posts: 224 - Thank you received: 8 - - 8 years 3 months ago - 8 years 3 months ago [\#295903](#295903) by [oloccina](/forum/user/23273-oloccina "View oloccina's Profile") Replied by *[oloccina](/forum/user/23273-oloccina "View oloccina's Profile")* on topic *[Infinite scroll layout not looking good](/forum/26-product-category-display/895354-infinite-scroll-layout-not-looking-good#295903 "-- 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")* 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 [ ![hika-infinite-scroll.png](/forum/attachment/44356) ](/forum/attachment/44356 "...ite-scroll.png") 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 - [ ![hika-infinite-scroll.png](/forum/attachment/44356) ](/forum/attachment/44356 "...ite-scroll.png") [ ](/forum/attachment/44356?download=1 "...ite-scroll.png") Last edit: 8 years 3 months ago by [oloccina](/forum/user/23273-oloccina "View oloccina's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUzNTQtaW5maW5pdGUtc2Nyb2xsLWxheW91dC1ub3QtbG9va2luZy1nb29kP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[oloccina](/forum/user/23273-oloccina "View oloccina's Profile")** - [![oloccina's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar23273.jpg)](/forum/user/23273-oloccina "View oloccina's Profile") Topic Author - [ Offline](/forum/user/23273-oloccina) Less More - Posts: 224 - Thank you received: 8 - - 8 years 2 months ago - 8 years 2 months ago [\#296677](#296677) by [oloccina](/forum/user/23273-oloccina "View oloccina's Profile") Replied by *[oloccina](/forum/user/23273-oloccina "View oloccina's Profile")* on topic *[Infinite scroll layout not looking good](/forum/26-product-category-display/895354-infinite-scroll-layout-not-looking-good#296677 "-- 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, I am still having this issue here [ accademiainfinita.it/shop](https://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 Last edit: 8 years 2 months ago by [oloccina](/forum/user/23273-oloccina "View oloccina's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUzNTQtaW5maW5pdGUtc2Nyb2xsLWxheW91dC1ub3QtbG9va2luZy1nb29kP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26394 - Thank you received: 4078 - - [](http://obsi.dev) - 8 years 2 months ago [\#296678](#296678) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Infinite scroll layout not looking good](/forum/26-product-category-display/895354-infinite-scroll-layout-not-looking-good#296678 "-- 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, 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. Code: if(elems && elems.length) { window.hikashop.setConsistencyHeight(elems, 'min'); } 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, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUzNTQtaW5maW5pdGUtc2Nyb2xsLWxheW91dC1ub3QtbG9va2luZy1nb29kP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[oloccina](/forum/user/23273-oloccina "View oloccina's Profile")** - [![oloccina's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar23273.jpg)](/forum/user/23273-oloccina "View oloccina's Profile") Topic Author - [ Offline](/forum/user/23273-oloccina) Less More - Posts: 224 - Thank you received: 8 - - 8 years 2 months ago - 8 years 2 months ago [\#296701](#296701) by [oloccina](/forum/user/23273-oloccina "View oloccina's Profile") Replied by *[oloccina](/forum/user/23273-oloccina "View oloccina's Profile")* on topic *[Infinite scroll layout not looking good](/forum/26-product-category-display/895354-infinite-scroll-layout-not-looking-good#296701 "-- 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")* 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 [ ![hika-inf-scroll.png](/forum/attachment/44541) ](/forum/attachment/44541 "...inf-scroll.png") and on mobile they don't look good either (there is space added on the left and right side) [ ![hika-inf-scroll-mobile.png](/forum/attachment/44542) ](/forum/attachment/44542 "...oll-mobile.png") 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) [ ![hika-inf-scroll-layout.png](/forum/attachment/44543) ](/forum/attachment/44543 "...oll-layout.png") Or could you tell me exactly how to implement the other solution you were suggesting? Thank you - [ ![hika-inf-scroll.png](/forum/attachment/44541) ](/forum/attachment/44541 "...inf-scroll.png") [ ](/forum/attachment/44541?download=1 "...inf-scroll.png") - [ ![hika-inf-scroll-mobile.png](/forum/attachment/44542) ](/forum/attachment/44542 "...oll-mobile.png") [ ](/forum/attachment/44542?download=1 "...oll-mobile.png") - [ ![hika-inf-scroll-layout.png](/forum/attachment/44543) ](/forum/attachment/44543 "...oll-layout.png") [ ](/forum/attachment/44543?download=1 "...oll-layout.png") Last edit: 8 years 2 months ago by [oloccina](/forum/user/23273-oloccina "View oloccina's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUzNTQtaW5maW5pdGUtc2Nyb2xsLWxheW91dC1ub3QtbG9va2luZy1nb29kP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")** - [![Mohamed Thelji's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar6861.png)](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") - [ Offline](/forum/user/6861-mohamed-thelji) Less More - Posts: 12953 - Thank you received: 1778 - - - 8 years 2 months ago [\#296729](#296729) by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") Replied by *[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")* on topic *[Infinite scroll layout not looking good](/forum/26-product-category-display/895354-infinite-scroll-layout-not-looking-good#296729 "-- 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, > but I have no idea on how to do it. Doing it like this will probably do the job : Code: if(elems && elems.length) { setTimeout(function() { window.hikashop.setConsistencyHeight(elems, 'min'); }, 1000 ); } Best regards, Mohamed Thelji. The following user(s) said Thank You: [oloccina](/forum/user/23273-oloccina "View oloccina's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUzNTQtaW5maW5pdGUtc2Nyb2xsLWxheW91dC1ub3QtbG9va2luZy1nb29kP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.093 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)