Susy gallery with AngularJS (ng-repeat) - not filling gaps from ng-hide

Question

I'm using Susy's gallery tool to display elements in a grid format. Angular is hiding or showing those grid elements on the fly, depending on user selections. When Angular hides an element in the grid, it attaches a class of ng-hide to it. This in turn sets its CSS to display:none !important.

The issue is that Susy is calculating the position of each element and not taking into account the items set to display:none - it is leaving gaps in the grid when those elements are hidden.

Is it possible to get Susy to ignore the hidden elements when laying them out?

I've tried using :not() CSS selector, without success - there's still gaps in the layout:

.results__result:not(.ng-hide) {
    @include gallery(3 of 12);
}

Answer 1

Sass doesn't know anything about the DOM, so Susy doesn't either. To create the gallery layout, susy has to rely on nth-child selectors — which don't work well for the use-case you are talking about. Start simple:

.results__result {
  @include span(3 of 12);
}

If you are using split, inside, or inside-static gutters — that should just work. Otherwise you need some way to target the last element in each row of the grid. CSS doesn't have a way to target nth-visible, so this would require added logic in your markup/js. Given a last class every 4th visible result, you can add:

.last {
  @include last;
}