La bibliothèque AngularGrid produit de l'espace vide dans certains cas particuliers

Question

J'utilise une grille angulaire pour obtenir une mise en page fluide de type Pintrest sur ma page. Cela fonctionne bien en général mais dans certains cas particuliers cela produit un espace vide sur ma page. Il semble que la position item7 n'est pas calculé correctement J'utilise AngularGrid de here Mon code est tout à fait semblable à ce qu'ils recommandent dans leur documentation sauf que je ne suis pas en utilisant une image mais un composant personnalisé à l'intérieur du ng-répétition. il ressemble à ceci:

angular.module('app').controller('demo', demo); 
 

 
function demo($rootScope, $scope, apiService, angularGridInstance) { 
 
    var self=this; 
 
    this.noOfProjects=8; 
 
    this.firstNo=0; 
 

 
    this.loadedProjects; 
 
    this.totalProjects; 
 

 
    apiService.searchProjects($rootScope.userId, self.noOfProjects, self.firstNo).then(function(response) { 
 
      console.log(response.data); 
 
      self.loadedProjects = response.data.matches; 
 
      self.totalProjects = response.data.header.totalCount; 
 

 
      console.log(self.loadedProjects); 
 
      $scope.pics=self.loadedProjects; 
 
     }); 
 
    
 
}

.dynamic-grid{ 
 
      position: relative; 
 
     } 
 
.angular-grid > *{ 
 
\t opacity: 1; 
 
} 
 
     .dynamic-grid.angular-grid{ 
 
      display: block; 
 
     } 
 

 
     .grid { 
 
      position: absolute; 
 
      list-style: none; 
 
      background: #ffffff; 
 
      box-sizing: border-box; 
 
      -moz-box-sizing : border-box; 
 
      overflow: hidden; 
 
     } 
 
     .grid-img { 
 
      width: 100%; 
 
      vertical-align: middle; 
 

 
      background-color: #fff; 
 
      
 
     } 
 

 
     .grid-img.img-loaded{ 
 
      visibility: visible; 
 
      opacity: 1; 
 
     }

<div class="" data-ng-controller="demo"> 
 
\t \t  <ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" > 
 
\t \t   <li data-ng-repeat="project in pics" class="grid" data-ng-clock> 
 
\t \t    <project-info-min-grid project="project" class="grid-img" ></project-info-min-grid> 
 
\t \t   </li> 
 
\t \t  </ul> 
 
\t \t </div>

Quelqu'un peut-il aider à ce problème?

Answer 1

Ok. un peu de recherche a montré que cela a été fait tubé par ce css sur certaines parties du contenu de chaque élément:

overflow: hidden; 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
    -webkit-box-orient: vertical;

lieu Je réduis maintenant la chaîne en javascript comme ceci:

var maxLength=100; 
 
      if(self.project.description){ 
 
       if(self.project.description.length > maxLength) { 
 
        self.project.description = self.project.description.substring(0,maxLength-1)+"..."; 
 
       } 
 
      }

et tout fonctionne très bien. Juste au cas où quelqu'un d'autre se heurte à ce problème ...