11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
J'avais des doute quant à la catégorie dans laquelle je me devais de poster ma question. Je vous prie de m'excuser si je me suis trompé.

Voici mon problème :
J'utilise isotope pour réorganiser des contributions d'internautes sur un site dédié à une concertation.
Les contributions n'ayant pas toutes la même longueur, je me suis fixé une taille maximum d'affichage avec possibilité de cliquer sur un bouton "voir plus" pour lire le texte d'une contribution dans son intégralité.
Globalement, cela fonctionne.

Le problème c'est qu'isotope semble définir la hauteur de mon div "grid" lors du chargement de la page et que ce dernier n'est pas mis à jour lorsque l'on développe les contributions en cliquant sur "voir plus".

Voici un exemple :
http://velo.dk-mobilite.fr/contrib?admin=e49402cec06fec978f1853ea7f7338c9073d0f75

Si on développe la seconde contribution, la hauteur de la page ne s'adapte pas et le contenu de la contribution passe derrière le footer et se perd dans le bas de page.

Je ne vois pas comment pallier à ce problème. Merci pour votre aide.
Problème résolu !

Voici l'astuce pour ceux que cela intéresse :

Il faut de nouveau faire appel à isotope lorsqu'avec Jquery on agrandit les contributions.

Exemple :

$('.VoirPlusButton').on( "click", function() {
			$(this).parent().toggleClass('little');
			$(this).parent().toggleClass('big');
			$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
  })
});