[Skip to main content](#vessel-content) # Hikashop update to Grid layout ## - **[EnerW](/forum/user/38634-enerw "View EnerW's Profile")** - [![EnerW's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/38634-enerw "View EnerW's Profile") Topic Author - [ Offline](/forum/user/38634-enerw) Less More - Posts: 101 - Thank you received: 8 - - 7 months 3 weeks ago [\#370776](#370776) by [EnerW](/forum/user/38634-enerw "View EnerW's Profile") *[Hikashop update to Grid layout](/forum/25-install-update/910177-hikashop-update-to-grid-layout#370776 "-- HikaShop version -- : 6.3.0 -- Joomla version -- : 5.4.3 -- PHP version -- : 8.2.30 -- Browser(s) name and version -- : 148.0.2 Morning, been wrestling with the “new and modern” grid layout and find it irritating. Did you really need to add the following line to the (main) hikashop.css file? .hk-row > [class*="hkc-"], .hk-row-fluid > [class*="hkc-"], .hk-container-fluid > [class*="hkc-"] { width: auto !important; float: none !important; } It’s rude, unprofessional and does screw up older layouts since each and every older css rule needs to be overwritten with it’s own, higher class, css important! rule. I suppose that the new grid layout is nice if you start from scratch, but above rule does not leave any simple fix for older templates other than to remove it from the hikashop.css and have to remove it again with each update. Just me blowing of some steam… Rene")* was created by *[EnerW](/forum/user/38634-enerw "View EnerW's Profile")* -- HikaShop version -- : 6.3.0 -- Joomla version -- : 5.4.3 -- PHP version -- : 8.2.30 -- Browser(s) name and version -- : 148.0.2 Morning, been wrestling with the “new and modern” grid layout and find it irritating. Did you really need to add the following line to the (main) hikashop.css file? .hk-row > [class*="hkc-"], .hk-row-fluid > [class*="hkc-"], .hk-container-fluid > [class*="hkc-"] { width: auto !important; float: none !important; } It’s rude, unprofessional and does screw up older layouts since each and every older css rule needs to be overwritten with it’s own, higher class, css important! rule. I suppose that the new grid layout is nice if you start from scratch, but above rule does not leave any simple fix for older templates other than to remove it from the hikashop.css and have to remove it again with each update. Just me blowing of some steam… Rene Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkxMDE3Ny1oaWthc2hvcC11cGRhdGUtdG8tZ3JpZC1sYXlvdXQ/dG1wbD1tYXJrZG93bg==) 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") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14293 - - 7 months 3 weeks ago [\#370778](#370778) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Hikashop update to Grid layout](/forum/25-install-update/910177-hikashop-update-to-grid-layout#370778 "-- HikaShop version -- : 6.3.0 -- Joomla version -- : 5.4.3 -- PHP version -- : 8.2.30 -- Browser(s) name and version -- : 148.0.2 Morning, been wrestling with the “new and modern” grid layout and find it irritating. Did you really need to add the following line to the (main) hikashop.css file? .hk-row > [class*="hkc-"], .hk-row-fluid > [class*="hkc-"], .hk-container-fluid > [class*="hkc-"] { width: auto !important; float: none !important; } It’s rude, unprofessional and does screw up older layouts since each and every older css rule needs to be overwritten with it’s own, higher class, css important! rule. I suppose that the new grid layout is nice if you start from scratch, but above rule does not leave any simple fix for older templates other than to remove it from the hikashop.css and have to remove it again with each update. Just me blowing of some steam… Rene")* Hi, In HikaShop 6.2.0, we switched the column system (hkc-* classes) from the old float/fixed-width approach to CSS Grid. The reason for the width: auto !important and float: none !important rules is that the old hkc-* classes had explicit width and float declarations baked into them. When we moved to CSS Grid, those old float/width values would actively break the grid layout (elements floating out of the grid, fixed widths conflicting with grid-template-columns). The !important was the only way to reliably neutralize them across all templates and overrides. We did get feedback early on that the initial version was too broad and affected things like form fields and checkout layouts. So we refined it to only apply inside grid containers: Code: .hk-row > [class*="hkc-"], .hk-row-fluid > [class*="hkc-"], .hk-container-fluid > [class*="hkc-"] { width: auto !important; float: none !important; } So it only targets hkc-* elements that are direct children of .hk-row wrappers, not all hkc-* elements on the page. If you have custom CSS that needs to set a specific width or float on a column inside a grid row, you can override it in your own CSS file with a more specific selector, for example: Code: .hk-row > .hkc-sm-6.my-custom-class { width: 50% !important; float: left !important; } Or, if you prefer to remove the grid behavior entirely for a specific listing, you can remove the hk-row class from the container in your view override, and the old float-based columns will work as before since the !important rules won't match. The following user(s) said Thank You: [EnerW](/forum/user/38634-enerw "View EnerW's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkxMDE3Ny1oaWthc2hvcC11cGRhdGUtdG8tZ3JpZC1sYXlvdXQ/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[EnerW](/forum/user/38634-enerw "View EnerW's Profile")** - [![EnerW's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/38634-enerw "View EnerW's Profile") Topic Author - [ Offline](/forum/user/38634-enerw) Less More - Posts: 101 - Thank you received: 8 - - 7 months 3 weeks ago [\#370839](#370839) by [EnerW](/forum/user/38634-enerw "View EnerW's Profile") Replied by *[EnerW](/forum/user/38634-enerw "View EnerW's Profile")* on topic *[Hikashop update to Grid layout](/forum/25-install-update/910177-hikashop-update-to-grid-layout#370839 "-- HikaShop version -- : 6.3.0 -- Joomla version -- : 5.4.3 -- PHP version -- : 8.2.30 -- Browser(s) name and version -- : 148.0.2 Morning, been wrestling with the “new and modern” grid layout and find it irritating. Did you really need to add the following line to the (main) hikashop.css file? .hk-row > [class*="hkc-"], .hk-row-fluid > [class*="hkc-"], .hk-container-fluid > [class*="hkc-"] { width: auto !important; float: none !important; } It’s rude, unprofessional and does screw up older layouts since each and every older css rule needs to be overwritten with it’s own, higher class, css important! rule. I suppose that the new grid layout is nice if you start from scratch, but above rule does not leave any simple fix for older templates other than to remove it from the hikashop.css and have to remove it again with each update. Just me blowing of some steam… Rene")* Evening Nicolas, as always thank you for the time you take to answer to questions and complaints. The steam is blown off and updates are made and, I must confirm, that the grid layout is working nice. Not sure about the latest 6.4.0. but I did find that in 6.3.0 for user / registration.php at the end for the control label and the registration button the grid settings are missing. ==== <!-- REQUIRED FIELDS TEXT --> <div class="hkform-group control-group hikashop_registration_required_info_line"> <div class="hkc-sm-4 hkcontrol-label"></div> <div class="hkc-sm-8"> <?php echo JText::_( 'HIKA_REGISTER_REQUIRED' ); ?> </div> </div> <!-- EO REQUIRED FIELDS TEXT --> <!-- REGISTER BUTTON --> <?php if(empty($this->form_name)) { $this->form_name = 'hikashop_checkout_form'; } $registerButtonName = JText::_('HIKA_REGISTER'); if($this->simplified_registration == 2) { $registerButtonName = JText::_('HIKA_NEXT'); } ?> <div class="hkform-group control-group hikashop_registration_button"> <div class="hkc-sm-4 hkcontrol-label"></div> <div class="hkc-sm-8"> <button type="submit" onclick="var field=document.getElementById( 'hikashop_product_quantity_field_1' ); hikashopSubmitForm('<?php echo $this->form_name; ?>', 'register'); return false;" class="<?php echo $this->config->get('css_button','hikabtn'); ?> hikabtn_checkout_login_register" id="hikashop_register_form_button"><?php echo $registerButtonName; ?></button> </div> Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkxMDE3Ny1oaWthc2hvcC11cGRhdGUtdG8tZ3JpZC1sYXlvdXQ/dG1wbD1tYXJrZG93bg==) 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") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14293 - - 7 months 3 weeks ago [\#370845](#370845) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Hikashop update to Grid layout](/forum/25-install-update/910177-hikashop-update-to-grid-layout#370845 "-- HikaShop version -- : 6.3.0 -- Joomla version -- : 5.4.3 -- PHP version -- : 8.2.30 -- Browser(s) name and version -- : 148.0.2 Morning, been wrestling with the “new and modern” grid layout and find it irritating. Did you really need to add the following line to the (main) hikashop.css file? .hk-row > [class*="hkc-"], .hk-row-fluid > [class*="hkc-"], .hk-container-fluid > [class*="hkc-"] { width: auto !important; float: none !important; } It’s rude, unprofessional and does screw up older layouts since each and every older css rule needs to be overwritten with it’s own, higher class, css important! rule. I suppose that the new grid layout is nice if you start from scratch, but above rule does not leave any simple fix for older templates other than to remove it from the hikashop.css and have to remove it again with each update. Just me blowing of some steam… Rene")* Hi, Thank you for the detailed feedback on the grid layout system and for identifying the registration form issue. You're right. The register button and the "Fields marked with an asterisk (*) are required." text were not wrapped in proper grid containers, unlike the form fields above them. This caused them to not align correctly with the label/input grid layout. We've fixed both elements by wrapping them in the same hkform-group / hkc-sm-8 structure used by the other form rows. The fix is available in the updated 6.4.0 package. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkxMDE3Ny1oaWthc2hvcC11cGRhdGUtdG8tZ3JpZC1sYXlvdXQ/dG1wbD1tYXJrZG93bg==) 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.056 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)