Définir une hauteur similaire à plusieurs éléments.

brokleen
Javascript

Hello,
Je galère à définir des éléments avec la même hauteur.
Dans mon cas les éléments sont affichés après une requête http ( angularJS )
Je fais un console.log( $('element').height() ) ; mais la valeur est éronnée.

Dans mon code html j'ai des conditions ( ng-if ) pour afficher ou non certains éléments et je me suis rendu compte que c'était ca qui posait problème.

Si je fais : 

          <h2 ng-if="title">
          {{title}}
          </h2>

La taille de l'élément ne sera pas prise en compte.
Si j'enlève la condtion la taille de l'élément est prise en compte.

Merci pour le coup de pouce !

8 réponses

Defy

j'ai eu des soucie avec le ng-if parceque a la différence du ng-show et ng-hide qui masque et qui affiche l'element, si la condition ng-if est false, il ne construit pas l'element html ( si je dit pas de connerie) et le construit que si c'est true du coup j'ai réglé le problème avec du ng-hide et ng-show

brokleen
Auteur

Salut defy même si ng-if renvoie true et affiche l'élement sa taille n'est pas prise en compte.

brokleen
Auteur

Dans mon cas en utilisant ng show et ng hide, cela va quand même comptabiliser la taille des éléments masqués. Du coup le résultat n'est pas bon.

brokleen
Auteur

Un petit up car j'ai toujours pas trouvé la solution :/

Lartak

Bonjour.

Un petit up car j'ai toujours pas trouvé la solution :/

Excuses moi de te dire ça, mais ce n'est pas un service après-vente ici, tu ne vas pas forcément avoir des réponses à tes demandes d'aides toutes les deux heures et encore moins forcément avoir la solution en moins de 24 heures.
Donc les up c'est à éviter le plus possible ici.

betaWeb

@Lartak +1
@brokleen Lorsque ton élément est en display: none, il n'a pas de hauteur puisqu'il n'est pas visible. Maintenant j'ai un peu de mal à cerner ton problème ? Tu voudrais que la hauteur de tes div s'adapte dynamiquement en fonction de la plus grande c'est ça ?

brokleen
Auteur

@Lartak Pardon Jesus.
@betaWeb Oui c'est ca. J'ai continué à faire des tests et j'ai découvert qu'en sélectionnant les enfants depuis le parent j'obtenait un résultat correct sur la fonction height(). Du coup que ce soit ng if ou ng show / ng hide on peut obtenir la taille réel de l'élement le plus grand en le sélectionnant depuis le parent.

betaWeb

Tu peux toujours regarder du côté des flexbox CSS (fais gaffe à la compatibilité avec les vieux browsers) : https://css-tricks.com/snippets/css/a-guide-to-flexbox/