How to wrap cards across rows?

[kpgarrod]

I have an unknown number of cards, with a width of say 300px. If the cards are too wide to fit in a row, I want them to automatically wrap onto the next row. This is my best effort:

<div layout="horizontal">
  <md-card ng-repeat="resourceType in resourceTypes"
           flex
           layout="vertical"
           ng-click="openDialog(resourceType.type)"
           class="cc-basic-card"> <!-- Just adds a min-height and min-width -->
    <h2>{{resourceType.name}}</h2>
    <p>{{resourceType.description}}</p>
 </md-card>
</div>

It doesn't wrap. Is there a simple way of doing this please?

[Frank3K]

As far as I know this is not possible using material alone, but I hope this will be added in the future.

I think it is possible using the CSS flex-wrap property MDN.

Unfortunately, flex-wrap is IE11+.

[plato-cambrian]

try display: inline-block on the cards

this will probably leave vertical gaps if the cards are not the same height

if you are unhappy with these gaps you could try angular-masonry

[madvas]

I hit the same problem. display: inline-block; didn't wrap cards, but instead made my row to go far beyond screen size. It would be nice if material could solve this problem out of the box :)

[thienedits]

Yea I was able to do this with the flex-wrap property

http://jsfiddle.net/thienedits/dnzn0455/

[plato-cambrian]

Awesome, what a great way to get around the inline-block extra whitespace problem

I would like to have a layout-wrap attribute:

[layout-wrap] {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

dunno if the prefixes are still needed

[kpgarrod]

I am also using flex-wrap and experiencing some issues with the positioning
of tooltips. Shall I make a plunker?
On 15 Nov 2014 02:54, "plato" notifications@github.com wrote:

Awesome, what a great way to get around the inline-block extra whitespace
problem http://jsfiddle.net/ct9qk6ux/

I would like to have a layout-wrap attribute:

[layout-wrap] {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

dunno if the prefixes are still needed

—
Reply to this email directly or view it on GitHub
#498 (comment).

[Frank3K]

PR: #634.

[mzbyszynski]

I believe this issue can be closed now via @ajoslin's commit 4f755ea . Or is there still more work to be done here (maybe just a documentation task for layout-wrap)?

[kpgarrod]

layout-wrap works for me, thanks.
On 8 Dec 2014 18:42, "Marc Zbyszynski" notifications@github.com wrote:

I believe this issue can be closed now via @ajoslin
https://github.com/ajoslin's commit 4f755ea
4f755ea
. Or is there still more work to be done here (maybe just a documentation
task for layout-wrap)?

—
Reply to this email directly or view it on GitHub
#498 (comment).