Angular Material : Md-card 段落中断 ng-repeat

Question

I'm building this from the angular Material website example, but added a ng-repeat , the list is nice and responsive:

There are 6 objects displayed, cause there are 6 in the backend server.

If I resize, instead of passing a line, it makes it narrow, which is not a bad thing:

If I resize to the 5" PHONE format, it is ok too:

Now, I get 20 objects from my server back end, Material won't automatically pass a line each 6 objects, it doesn't display right.

So, I've tried this code, but it doesn't work, the ng-if works, but doesn't pass a line. :

<md-content class="md-padding" layout-xs="column" layout="row">
                                  <div  flex-xs flex-gt-xs="50" layout="column" class="flex" ng-repeat="j in juristes" ng-click="editerJuriste(j)" style="cursor:pointer">
                                    <md-card    ng-class="{yellow : j == selectedObject}" ng-click="selectItem(j); selectedIndex = 1;" class="md-card" style="cursor:pointer">
                                        <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out"/>
                                        <md-card-title>
                                            <md-card-title-text>
                                            <span class="md-headline">{{ j.text }}</span>
                                            <span class="md-subhead">{{ j.ville }}</span>
                                            </md-card-title-text>
                                        </md-card-title>

                                        <md-card-content>
                                            <p>It is a <a href="#">long established fact</a> that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                                            <h4>More Ipsums</h4>
                                            <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                                        </md-card-content>

                                        <md-card-actions layout="row" layout-align="end center">
                                          <md-button class="md-icon-button" aria-label="Favorite">
                                            <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
                                          </md-button>
                                          <md-button class="md-icon-button" aria-label="Settings">
                                            <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
                                          </md-button>
                                          <md-button class="md-icon-button" aria-label="Share">
                                            <md-icon md-svg-icon="img/icons/share-arrow.svg"></md-icon>
                                          </md-button>
                                        </md-card-actions>

                                    </md-card>

                                    <div  ng-if="($index + 1) % 3 == 0">test<div class='md-padding' layout="row" layout-wrap></div><br></div>
                                  </div>
                            </md-content>

Is there any way to keep the CSS behaviour, and to insert a paragraph break, each of the 6 objects?

Thank you a lot if you know about this problem, I've tried a few solutions on StackOverflow, but it doesn't work as expected.

EDIT : Just to make you see how it can't be used : I 've added a few objects :

Bootstrap does this automatically, but i really can't understand how to break a paragraph between objects with material, please help.

Answer 1

You can solve the md-card wrapping issue by wrapping the card in a . Repeat the block with the desired flex value (ie flex="20" for rows of 5). Note: It doesn't auto height the cards though. Editing from code pen URL: https://codepen.io/anon/pen/MwzRde

 angular.module('MyApp') .controller('AppCtrl', function($scope) { $scope.users = ['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max']; });

 .gridListdemoBasicUsage md-grid-list { margin: 8px; } .gridListdemoBasicUsage .gray { background: #f5f5f5; } .gridListdemoBasicUsage md-grid-tile { transition: all 400ms ease-out 50ms; }

 <html> <head> <link rel="stylesheet prefetch" href="https://gitcdn.xyz/repo/angular/bower-material/v0.10.1-rc4/angular-material.css"> </head> <body> <div ng-app="MyApp" class="gridListdemoBasicUsage" ng-controller="AppCtrl as appCtrl"> <h1>User List</h1> <div class='md-padding' layout="row" layout-wrap> <div flex="20" ng-repeat="user in users"> <md-card> <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar"> <md-card-content> <h2>{{user}}</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> </md-card-content> <div class="md-actions" layout="row" layout-align="end center"> <md-button>Save</md-button> <md-button>View</md-button> </div> </md-card> </div> </div> </div> <script src="//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.min.js"></script> <script src="https://gitcdn.xyz/repo/angular/bower-material/v0.10.1-rc4/angular-material.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script> <script> angular.module('MyApp') .controller('AppCtrl', function($scope) { $scope.users = ['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max']; }); //# sourceURL=pen.js </script> </body> </html>