Quel code JS rajoute les attributs "min-width" et "max-width" sur certaines DIV
Bonjour,
Je remarque que certains DIV se voient rajouter des attributs "min-width" et/ou "max-width" (exemple : <div class="card-count-3 card-responsive-layout" max-width="900px" min-width="480px">).
Malgré de longues recherches, impossible de trouver quel code JS rajoute ces éléments, et encore moins comment éviter que ces attributs soient rajoutés.
Y a t-il quelqu'un qui sâche d'où cela pourrait venir ?
Merci.
Best answer
Bonjour, c'est elementQuery, qui permet de faire des container queries css.
Le js va lire le fichier jalios-card-layout-deck.css, et positionner les attributs sur la balise concernée. On ne peut pas éviter que cela s'applique si dans le css les attributs sont définis.
Vous pouvez pour éviter cela, soit remplacer complètement le fichier css généré, soit positionner dans custom.less la variable suivante :
@enable-cards-layout-deck-element-queries: false;
Il faudra ensuite recompiler complètement vos fichiers less (Voir less)
Dans une approche site complet, vous pouvez aussi complètement débrayer la librairie elementQueries et procéder seulement par media queries.
Dans le cadre de nos composants standards, ne sachant pas forcémentn où ils seront insérés, il nous est nécessaire d'utiliser les element queries. Dans votre cas, pour un client final ayant fait sa charte complète, vous avez effectivement plus de visibilité sur le résultat final attendu.
Merci.
Ce comportement nous complique la vie d'intégrateurs, mais je comprend votre problématique.
Serait-il possible d'avoir une façon plus "simple" de gérer cela ? Par exemple, avec une propriété, ou via une modification du sélecteur (pour avoir BODY:not(.no-element-queries), par exemple) ?
Dans une approche "plugins", il est assez étrange de "patcher" le fichier "custom.less" pour désactiver ce comportement, car il y a le risque qu'un autre module modifie aussi ce fichier et pourrait alors "supprimer" ce "patch".
Merci.
Cordialement
Statuses