[Skip to main content](#vessel-content) # Product Listings - Jagged Display ## - **[brendanlanza](/forum/user/45588-brendanlanza "View brendanlanza's Profile")** - [![brendanlanza's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/45588-brendanlanza "View brendanlanza's Profile") Topic Author - [ Offline](/forum/user/45588-brendanlanza) Less More - Posts: 47 - Thank you received: 0 - - 9 years 8 months ago [\#263624](#263624) by [brendanlanza](/forum/user/45588-brendanlanza "View brendanlanza's Profile") *[Product Listings - Jagged Display](/forum/26-product-category-display/889093-product-listings-jagged-display#263624 "-- url of the page with the problem -- : unicomms-emall.com -- HikaShop version -- : 3 Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells) etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all.")* was created by *[brendanlanza](/forum/user/45588-brendanlanza "View brendanlanza's Profile")* -- url of the page with the problem -- : [ unicomms-emall.com](http://unicomms-emall.com) -- HikaShop version -- : 3 Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells) [ ![1_2017-02-28.jpg](/forum/attachment/36663) ](/forum/attachment/36663 "1_2017-02-28.jpg") etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all. - [ ![1_2017-02-28.jpg](/forum/attachment/36663) ](/forum/attachment/36663 "1_2017-02-28.jpg") [ ](/forum/attachment/36663?download=1 "1_2017-02-28.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODkwOTMtcHJvZHVjdC1saXN0aW5ncy1qYWdnZWQtZGlzcGxheT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86363 - Thank you received: 14296 - - 9 years 8 months ago [\#263627](#263627) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Product Listings - Jagged Display](/forum/26-product-category-display/889093-product-listings-jagged-display#263627 "-- url of the page with the problem -- : unicomms-emall.com -- HikaShop version -- : 3 Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells) etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all.")* Hi, The issue is that you have a javascript error on your page coming from another extension: [ monosnap.com/file/aTMP3vVWZ3NOSY0OeVl4juKCZRI6sF](https://monosnap.com/file/aTMP3vVWZ3NOSY0OeVl4juKCZRI6sF) Because of that the "height consistency" javascript of HikaShop is not run on the page and the height is not adapted automatically. Note that you can also force the height yourself with simple CSS like below that you can add to your template: .hikashop_subcontainer { height: 320px; } Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODkwOTMtcHJvZHVjdC1saXN0aW5ncy1qYWdnZWQtZGlzcGxheT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile")** - [![lmcbmai's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/49603-lmcbmai "View lmcbmai's Profile") - [ Offline](/forum/user/49603-lmcbmai) Less More - Posts: 39 - Thank you received: 3 - - 9 years 6 months ago - 9 years 6 months ago [\#269226](#269226) by [lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile") Replied by *[lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile")* on topic *[Product Listings - Jagged Display](/forum/26-product-category-display/889093-product-listings-jagged-display#269226 "-- url of the page with the problem -- : unicomms-emall.com -- HikaShop version -- : 3 Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells) etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all.")* Hi Nicolas, I have Joomla template with responsive design and observe similar behavior without Javascript errors. The screenshot is attached. The gaps appear in random places. Sometimes there are no gaps at all. I suspect it somehow depends on browser windows size. I tried to update CSS as you suggested; it works, but breaks responsive layout. ![:(](/media/kunena/emoticons/22.png ":(") Is there any other solution that you could think of ? Thanks. Best regards, B.G. - [ ![category_layout.png](/forum/attachment/38074) ](/forum/attachment/38074 "...ory_layout.png") [ ](/forum/attachment/38074?download=1 "...ory_layout.png") Last edit: 9 years 6 months ago by [lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODkwOTMtcHJvZHVjdC1saXN0aW5ncy1qYWdnZWQtZGlzcGxheT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) 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: 26395 - Thank you received: 4077 - - [](http://obsi.dev) - 9 years 6 months ago [\#269228](#269228) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Product Listings - Jagged Display](/forum/26-product-category-display/889093-product-listings-jagged-display#269228 "-- url of the page with the problem -- : unicomms-emall.com -- HikaShop version -- : 3 Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells) etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all.")* Hello, Sorry but without any link to your website or details about the menu configuration we won't be able to say much. But the feature you're looking for his "height consistency". And the page need to be JS errror clean to let that feature work, as Nicolas said : > Because of that the "height consistency" javascript of HikaShop is not run on the page and the height is not adapted automatically. Regards, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODkwOTMtcHJvZHVjdC1saXN0aW5ncy1qYWdnZWQtZGlzcGxheT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile")** - [![lmcbmai's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/49603-lmcbmai "View lmcbmai's Profile") - [ Offline](/forum/user/49603-lmcbmai) Less More - Posts: 39 - Thank you received: 3 - - 9 years 5 months ago - 9 years 5 months ago [\#269429](#269429) by [lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile") Replied by *[lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile")* on topic *[Product Listings - Jagged Display](/forum/26-product-category-display/889093-product-listings-jagged-display#269429 "-- url of the page with the problem -- : unicomms-emall.com -- HikaShop version -- : 3 Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells) etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all.")* 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. Code: <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. Last edit: 9 years 5 months ago by [lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile"). The following user(s) said Thank You: [jazzmang](/forum/user/5807-jazzmang "View jazzmang's Profile"), [themarychain](/forum/user/50691-themarychain "View themarychain's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODkwOTMtcHJvZHVjdC1saXN0aW5ncy1qYWdnZWQtZGlzcGxheT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86363 - Thank you received: 14296 - - 9 years 5 months ago [\#269456](#269456) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Product Listings - Jagged Display](/forum/26-product-category-display/889093-product-listings-jagged-display#269456 "-- url of the page with the problem -- : unicomms-emall.com -- HikaShop version -- : 3 Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells) etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all.")* Hi, Thanks. That's basically what the "height consistency" feature in HikaShop does by default. But you can use your javascript, it's the same. An alternative is to force the height of all the boxes with CSS as I proposed here [ www.hikashop.com/forum/product-category-...-display.html#263627](https://www.hikashop.com/forum/product-category-display/889093-product-listings-jagged-display.html#263627) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODkwOTMtcHJvZHVjdC1saXN0aW5ncy1qYWdnZWQtZGlzcGxheT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile")** - [![lmcbmai's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/49603-lmcbmai "View lmcbmai's Profile") - [ Offline](/forum/user/49603-lmcbmai) Less More - Posts: 39 - Thank you received: 3 - - 9 years 5 months ago [\#269469](#269469) by [lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile") Replied by *[lmcbmai](/forum/user/49603-lmcbmai "View lmcbmai's Profile")* on topic *[Product Listings - Jagged Display](/forum/26-product-category-display/889093-product-listings-jagged-display#269469 "-- url of the page with the problem -- : unicomms-emall.com -- HikaShop version -- : 3 Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells) etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all.")* Thanks Nicolas! I have 'height consistency" enabled, but it does not work by some reason. Tried also forcing fixed height in CSS, but that breaks responsive layout of Joomla template. Most likely there is some kind of conflict between the way Hikashop builds the layout and what my Joomla template is trying to do to adapt layout to the screen resolution of different devices types. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODkwOTMtcHJvZHVjdC1saXN0aW5ncy1qYWdnZWQtZGlzcGxheT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[jazzmang](/forum/user/5807-jazzmang "View jazzmang's Profile")** - [![jazzmang's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/5807-jazzmang "View jazzmang's Profile") - [ Offline](/forum/user/5807-jazzmang) Less More - Posts: 291 - Thank you received: 26 - - - [](http://www.interkan.net) - 8 years 10 months ago [\#284485](#284485) by [jazzmang](/forum/user/5807-jazzmang "View jazzmang's Profile") Replied by *[jazzmang](/forum/user/5807-jazzmang "View jazzmang's Profile")* on topic *[Product Listings - Jagged Display](/forum/26-product-category-display/889093-product-listings-jagged-display#284485 "-- url of the page with the problem -- : unicomms-emall.com -- HikaShop version -- : 3 Hi guys, I've never faced this problem in Hikashop 2+ but since using Hikashop 3 the product listings are coming out jagged with gaps in the columns (empty cells) etc. The Infinite Scroll feature is fabulous but the Height Consistency feature does not seem to have any impact at all.")* I have this exact same issue on multiple sites and it isn't JS error related. My testing has show it was primarily a desktop issue. Page width didn't seem to matter, more the browser - happens equally on Chrome, Firefox, IE, etc. I did notice it happened more on FF until the latest Quantum release came out. That suggest to me it is a JS performance / timing issue. I too went the CSS fixed height at first but it just causes other problems. imcbmai's script does seem to be the fix. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84ODkwOTMtcHJvZHVjdC1saXN0aW5ncy1qYWdnZWQtZGlzcGxheT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) 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.070 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)