homerjam/angular-gridify

Angular directive that creates a justified grid of elements

angular-gridify's Issues

Gaps in the end of a row, depends on number of items in.

Hi, thanks for working on this project.

I found there are gaps in end of a row and it depends on the number of items in the row.

Please see attached screen shoot.

It would be graceful if you can fix or show me a solution to fix this.

Thanks.

No support for filtering

It would be nice to see option allowing filtering instead of creating filtered copy of collection, and manually triggering filtering.

Rows not filling correctly.

Hi James,

I have an issue with a certain grid I'm using. It has 5 images and I'm trying to get 3 in one row and 2 in the next.

My options:

minRowLength: 2
perRow: 3

Am I missing something obvious?

I always get 4 image in the top row and one image in the second row that's huge if I set my minRowLength: 1 or small if i set it to 2

Trying to debug the code now to find out why this is happening but any help would be appreciated

Thanks :)

Is there a way to refresh the layout?

Is there a way to refresh the layout on click? I have a 'load more' button that appends more items to the array i'm looping through with ng-repeat. Unfortunately when the next lot of items load, they don't get the layout properties.

Large item after filter

After filtering a collection if it contain only one or two things, bricks are growing to huge sizes if they are 1:n ratio.

Container is oversized in example

It looks like the container is being oversized, possibly its taking its size from the parent but excluding padding? Or possibly its adding an extra gutter (or two) in the calculation...

@oliodj any time to look at that? Also check out homerjam/angular-gridflex for a better version of this directive

Splicing items from array - watch scope changes

Hey James,

Hopefully the last question... :)

I have a 'load more' function that simply pushes new objects to my $scope.cards array which works fine. I'm watching $scope.cards and it refreshes the grid accordingly.

However, I also have a 'delete' function that splices objects from the array but the grid doesn't refresh even though it's watching for changes to $scope.cards. I just end up with a blank space on my screen.

Any ideas why this would be happening?

Thanks.

Responsive issue: changing perRow value

Hi James,

Is there a way for the grid to watch the perRow? I've tried something like the below, but not having much luck.

Ideally I want 3 items per row on any screens over 767px and just one item on any smaller devices.

perRow: itemsPerRow

$scope.itemsPerRow = 3;

window.onresize = function() {
    if (window.innerWidth >= 767) {
           $scope.$apply(function() {
               $scope.itemsPerRow = 3;
        });
    } else {
        $scope.$apply(function() {
                 $scope.itemsPerRow = 1;
        });
    }
}

Remove jQuery dependency

I'm wondering how welcome a PR would be for removing the jQuery dependency for this directive?

When I first tried using it, I didn't realise I needed jQuery (as it doesn't seem to be mentioned anywhere) and was frustrated with it not working. From quickly glancing over the source, there doesn't seem to be any substantial code that relies on jQuery that couldn't be done in vanilla JS.

Would you accept a PR? This directive is exactly what I'm looking for, but now I have another ~80KB library that I didn't need before.