akoenig / angular-deckgrid

A lightweight masonry-like grid for AngularJS.
http://akoenig.github.io/angular-deckgrid
MIT License
1.1k stars 190 forks source link

Edge issue with class(es) on [deckgrid] #105

Open chaelli opened 8 years ago

chaelli commented 8 years ago

If you have issues with edge not respecting the media queries - make sure you have no classes on the [deckgrid] element. Edge will return this: [deckgrid].classname::before as a selector and therefore does not match the used regex

Shingaz commented 8 years ago

@chaelli, what your CSS looks like without a class on the deckgrid element? How do you configure the responsiveness?

Edit: fixed with PR #102

chaelli commented 8 years ago

@Shingaz:

[deckgrid] {
    overflow: hidden;
    &:before {
      font-size: 0;
      visibility: hidden;
      content: '1 .example__item-column--1';

      @include dao-mq-min(500px) {
        content: '2 .example__item-column--2';
      }

      @include dao-mq-min($bp-s-max) {
        content: '3 .example__item-column--3';
      }

      @include dao-mq-min($bp-m-max) {
        content: '4 .example__item-column--4';
      }
    }
  }

and btw. - I needed this to make sure the columns always have enough space in edge:

.example__item-column--2 {
  width: calc(100%/2.0001);
}

.example__item-column--3 {
  width: calc(100%/3.0001);
}

.example__item-column--4 {
  width: calc(100%/4.0001);
}