Hikashop update to Grid layout

  • Posts: 101
  • Thank you received: 8
  • Hikashop Business
1 week 5 days ago #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

Please Log in or Create an account to join the conversation.

  • Posts: 85323
  • Thank you received: 13937
  • MODERATOR
1 week 5 days ago #370778

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:

  .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:
  .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

Please Log in or Create an account to join the conversation.

  • Posts: 101
  • Thank you received: 8
  • Hikashop Business
1 week 1 day ago #370839

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 or Create an account to join the conversation.

  • Posts: 85323
  • Thank you received: 13937
  • MODERATOR
1 week 16 hours ago #370845

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 or Create an account to join the conversation.

Time to create page: 0.047 seconds
Powered by Kunena Forum