1

I'm trying to build a Card layout with angular material that will allow cards to have a variable height and be able change the number of displayed columns based on window width.

It was pretty straight forward to get almost what I'm looking for which is what is shown here in this question but the example linked in the answer here does not allow for cards to have a dynamic height.

I've tried angular-masonry a few weeks ago but would not get it to work, I may try again with angular masonry but ideally would like to achieve it without using extra javascript libraries.

Currently I am achieving what I want by ng-repeating over multiple columns then selectively adding my cards to each column for example if I have two columns add odd cards to column 1 and even cards to column 2, but that causes new elements to be rendered and added to DOM whenever columns resize. I want to be able to use the same elements and achieve the desired behaviour through css.

Community
  • 1
  • 1
jalbasri
  • 328
  • 2
  • 13
  • angular-masonry is the right direction to go friend, try it again. I rarely recommend external libraries, but masonry is lightweight and save weeks of work for you. – AVAVT Dec 06 '15 at 14:04
  • Thanks friend! angular-masonry worked like a charm after about 20 mins of tweaking. It was actually a few months ago when I tried it at first and I can't recall exactly what was going wrong but I really frustrated with it and found my workaround I described above left it like that and went on to work on other parts of the project knowing I'd have to come back a find a better way to do this later on. It's been in the back of my mind since then hah I'll have to go back and look at my old commits to see what I was doing wrong back then but this time it worked really well. Cheers :) – jalbasri Dec 07 '15 at 08:39

1 Answers1

1

Have you tried using column-count?

column-count: $columns;
column-gap: 0px;
-moz-column-count: $columns;
-moz-column-gap: 0px;
-webkit-column-count: $columns;
-webkit-column-gap: 0px;

You can wrap this in a @media query for different sizes.

Milad Naseri
  • 4,053
  • 1
  • 27
  • 39
  • Hi, Yes I tried column-count. 2 issues: it places cards down the column instead of across the row and when new cards are loaded cards switch columns. Both are no can do conditions for me. – jalbasri Mar 07 '16 at 17:51
  • I hadn't realized that (since I had only mocked this using static data). I recently came across Angular Deckgrid: https://github.com/akoenig/angular-deckgrid Have you tried it? – Milad Naseri Mar 09 '16 at 23:10