Bonjour à tous,

J'ai créer une petite galerie d'article avec bootstrap et en utilisant la librairie javascript isotope. Mon problème est simple mais me prend la tête je n'arrive pas à le résoudre...

En gros, j'aimerais que tout soit bien aligné quelque soit la hauteur des éléments : que les card soient de la même hauteur et que, lorsqu'il y a une ligne en dessous avec d'autres articles, cela se mette correctement avec une ligne bien droite.

J'avais fait cette galerie avec bootstrap tout court et cela fonctionnait bien mais des lors que j'ajoute isotope, cela part en cacahuète...

Une idée ?

Voici mon code que j'ai mis sur codepen par simplicité : https://codepen.io/zazzou/pen/wveWZyY

Merci beaucoup pour votre aide

Bonjour,

Avez-vous regardez les "Layout modes" dans la documentation d'isotope : https://isotope.metafizzy.co/layout-modes.html

-
Edité par Lord Morpheus 6 septembre 2021 à 16:17:58

Bonjour,

Merci pour votre réponse.

Oui, mais dès que j'ajoute par exemple ligne 4 :

var $container = $('#container-posts').isotope({ itemSelector: itemSelector, layoutMode: 'packery' });

Cela fait tout sauter : je n'ai plus qu'une carte et le filtrage ne fonctionne plus :-(

Quelqu'un a une idée ?

Je pense que le problème vient aussi des lignes qui concernent le responsive : notamment les lignes 47 et suivantes.

Il manque pourtant pas grand chose pour que cela soit top mais je ne trouve pas ... :-(