Colonnes

Bonjour,

Merci du retour sur ce souci. Cela vient du nouveau système de grille introduit dans la nouvelle version et un effet de bord de votre CSS personnalisé.
J'ai fait un patch dans HikaShop pour rendre le nouveau système plus solide pour ce genre de cas. Téléchargez à nouveau le paquet d'installation d'HikaShop sur notre site et installez-le sur le votre pour avoir le patch. Notez qu'il faudra vider le cache du navigateur pour que le nouveau CSS soit utilisé par le navigateur et que vous voyez la différence.

Bonjour,

C'est justement pour ce genre de retours que nous avons une période de 2 semaines après une release où la mise à jour via Joomla n'est pas activée.
Le nouveau système de grille fonctionne bien mieux que l'ancien et il est nécessaire de le mettre à jour après 15 ans sur l'ancien.
Mais cela peut créer des soucis avec certaines personnalisations.
Si vous avez des exemples de problèmes, merci de fournir les URLs pour que nous puissions les étudier.
Nous pourrons ainsi voir pour améliorer le nouveau CSS pour éviter les problèmes de mise à jour, comme le permet le patch que j'ai fait suite au retour de @sudkarting
Cela permettra ensuite de faire la mise à jour sur le site live, sans souci.
D'ailleurs, si vous ne l'avez pas déjà fait sur votre site de dev, récupérez bien la version patchée hier.

Bonjour,

Merci, c'est exactement ce qu'il me fallait.

Pour le souci n°1, en effet, la coupure à 576px est trop agressive. J'ai modifié cela.

Pour le souci n°2, le problème ne vient pas du nouveau système de grille, mais du patch que j'ai fait pour sudkarting, qui est trop violent et affecte les champs des formulaires alors qu'il ne faut pas.
J'ai changé le patch pour quelque chose de plus affiné.

Téléchargez à nouveau le paquet d'installation d'HikaShop sur notre site et installez-le sur le votre et tout devrait rentrer dans l'ordre.

Merci du retour. En effet, il y a un second souci avec le CSS pour les champs. J'ai fait un patch additionnel.
Téléchargez à nouveau le paquet d'installation d'HikaShop sur notre site et installez-le sur le votre et tout devrait rentrer dans l'ordre.

Bonjour,

Alors oui, mais là, c'est parce que vous avez du CSS personnalisé dans tous les sens entre le template, un plugin système et vos personnalisations pour passer les champs en 2 colonnes.
Donc je ne pense pas que nous pouvons faire grand chose dans HikaShop pour éviter cela.
Là, il va falloir rajouter du CSS custom pour gérer tout cela comme il faut avec le nouveau système d'HikaShop, en tenant en compte le résultat que vous voulez, et le CSS custom déjà présent.
Par exemple, quelque chose comme cela:

/* Fix HikaShop Layout - Side-by-Side */
.hkform-group {
    display: flex !important;
    flex-wrap: nowrap !important; /* Keep on same line */
    align-items: center !important;
}

.hkform-group > label,
.hkform-group .control-label {
    flex: 0 0 120px !important; /* Fixed width */
    width: 120px !important;
    min-width: 120px !important;
    white-space: normal !important;
    margin-right: 15px !important;
}

/* Allow input to shrink/grow */
.hkform-group .controls,
.hkform-group input,
.hkform-group select {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important; /* Allow shrinking */
}

.hkform-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    
    /* Handle spacing and width correctly */
    box-sizing: border-box !important; 
    padding-right: 20px !important; /* Creates space between Col 1 Input and Col 2 Label */
}

/* Ensure absolute safety for inputs */
.hkform-group input, 
.hkform-group select, 
.hkform-group .controls {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* --- Fix 1: Country Selector (Chosen) --- */
/* Force Chosen container to be responsive within the flex item */
.hkform-group .chzn-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Allow shrinking if needed */
}
.hkform-group .chzn-drop {
    width: 100% !important; /* Ensure dropdown matches container width */
    box-sizing: border-box !important;
}

/* --- Fix 2: "Same Address" Checkbox --- */
/* Reset flex behavior specifically for the checkbox line */
.hikashop_registration_same_address_line {
    display: block !important; /* Stop trying to be a flex row with restricted columns */
    width: 100% !important;
    clear: both !important;
    margin-top: 10px !important;
}

/* Hide the empty label column if it's taking up space */
.hikashop_registration_same_address_line .hkcontrol-label {
    display: none !important;
}

/* Ensure the checkbox container takes full width */
.hikashop_registration_same_address_line > div:not(.hkcontrol-label) {
    width: 100% !important;
    display: block !important;
    padding-left: 0 !important;
}

/* Style the checkbox and label to sit nicely together */
.hikashop_registration_same_address_line input[type="checkbox"] {
    display: inline-block !important;
    width: auto !important;
    margin-right: 8px !important;
    float: none !important; /* Remove any float interference */
    vertical-align: middle !important;
}

.hikashop_registration_same_address_line label {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important; /* Prevent squashing */
    float: none !important;
    min-width: 0 !important; /* Override the 160px from previous rule */
    vertical-align: middle !important;
    margin: 0 !important;
}

Bonjour,

Le problème, c'est que vous avez un système de traduction automatique des pages sur votre navigateur, et il a traduit des morceaux du code CSS que j'ai fourni dans mon précédent message.
Du coup, vous avez copier / coller du code CSS incorrect dans votre fichier custom.
Supprimez le et refaites la manipulation sans que la page soit traduite automatiquement et cela devrait fonctionner.