AngularGrid library produces empty space in some special cases

Question

I am using Angular grid to achieve a Pintrest-like fluid layout of items on my page. It works fine in general but in soem special cases it produces an empty space on my page. It seems the position of item7 is not calculated correctly I am using AngularGrid from here My code is quite similar to what they recommend in their documentation except that I am not using an image but a custom component inside the ng-repeat. so it looks like this:

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 > *{
 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">
      <ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
          <li data-ng-repeat="project in pics" class="grid" data-ng-clock>
              <project-info-min-grid project="project" class="grid-img" ></project-info-min-grid>
          </li>
      </ul>
  </div>

Can anyone help with this problem?

score 0 · Answer 1 · answered Oct 19 '16 at 13:09

Ok. a bit of research showed that this was actually cased by this css on some parts of the content of each item:

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

Instead I am now shortening the string in javascript like this:

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

and everything works fine. Just in case someone else runs into this problem...

AngularGrid library produces empty space in some special cases

1 Answers1