28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je suis devant un problème que j'arrive pas à résoudre. je m'explique :
J'utilise le plugin isotope (http://isotope.metafizzy.co/) pour intégrer des filtres à une liste d'item.
Sans ce plugin JS, voila le résultat http://codepen.io/fabiolm/pen/jBVJWM : on voit que la hauteur de chaque item est identique malgré que le deuxième item comporte plus de texte à l'intérieur que les autres grâce aux propriétés flexbox.

Avec ce plugin intégré par contre , voila le résultat : https://codepen.io/fabiolm/pen/EWNmoX
Mon problème est que le plugin isotope surcharge mes items en les positionnant en absolute (pour repositionner les items quand on clique sur un filtre). Du coup, je me retrouve (comme vous pouvez le constater) avec des items qui ne sont plus de hauteur identique si le texte n'est pas de même longueur.

J'ai essayé des trucs (surcharger le positionnement absolute, ...) mais rien ne convient.

Le but est d'avoir des items de hauteur identique quelque soit le texte à l'intérieur.

Y'a t'il une solution selon vous ? laquelle ?

merci de vos retours
Administrateur
Hello,

Nous nous sommes nous aussi heurté à un problème de "compatibilité" entre isotope / masonry et Flexbox car isotope dénature l'élément en le positionnant en absolute.

Il n'y a malheureusement pas grand chose à faire il me semble. En gros c'est l'un ou l'autre.

Il y a une discussion ici qui semble avoir été résolue : http://stackoverflow.com/questions/39581446/doesnt-isotope-play-nice-with-flexbox-or-is-it-just-me

Bonne chance.
Modifié par Raphael (08 Mar 2017 - 11:05)
ok, merci pour ton retour Raphael. Je me doutais de cette réponse aussi.
Tu as en tête une autre solution css pour conserver isotope et des items qui garde la même hauteur (sans flexbox ) ?
Administrateur
Sans conviction : passer par min-height, ou bien calculer la hauteur du plus grand en JS et l'appliquer aux autres.
Modérateur
Hello,

À quoi sert Masonry si tes éléments ont tous la même taille ?
Pourquoi tu ne fais pas une grille (flex, float, ou autre) ?

Il y a certainement une réponse simple mais je ne la vois pas encore...
Yordi a écrit :
Hello,

À quoi sert Masonry si tes éléments ont tous la même taille ?
Pourquoi tu ne fais pas une grille (flex, float, ou autre) ?

Il y a certainement une réponse simple mais je ne la vois pas encore...


masonry, comme packery, est un autre type de plugin JS crée par metafizzy (créateur d'isotope)
pour finir sur le sujet, j'ai demandé au créateur de isotope sur son github, voici sa réponse :

"Sorry, but I don't think there is a good solution here. Isotope and display: flex (flex-box) are not designed to work together. Isotope was designed to work with floated elements. display: flex is designed to have elements static, and not have their layout manipulated."