0

I am showing cards using ng-repeat. The data and all is coming fine but somehow i am struggling to have 3 cards in a row and go to the next row for the other items.

My ng-repeat code is as follows:

<md-content ng-repeat="agent in agents|filter:search" layout="row">
            <md-card>
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-subhead">{{agent.RCustId}}</span>
                        <span class="md-headline">{{agent.FullName}}</span>
                        <span class="md-subhead">{{agent.ContactNum}}</span>
                    </md-card-title-text>

                </md-card-title>

                <md-card-content>
                    <p>
                        {{agent.address}}
                    </p>
                </md-card-content>

                <md-card-actions layout="row" layout-align="end center">
                    <md-button>Collect {{agent.balance_amount}}</md-button>
                </md-card-actions>

            </md-card>
        </md-content>

I want the card side by side but these are coming one per each line.

Where is the issue and how to resolve it please.

Lakshman Pilaka
  • 1,803
  • 2
  • 24
  • 48

2 Answers2

2

Try surrounding md-card with a <div> with layout-wrap - you can then use flex=".." - with number corresponding to number of columns you want in row.

See layout options documentation here.

<div class='md-padding' layout="row" layout-wrap>
       <md-card flex="33" ng-repeat="agent in agents|filter:search">

See answer here for more detail and examples.

Community
  • 1
  • 1
James P
  • 2,201
  • 2
  • 20
  • 30
0

Add the content inside section

<section layout="row" layout-sm="column"  layout-wrap>
// your code
</section>

Working example http://plnkr.co/edit/hE38nAAJT35UJL71JGoS?p=preview

Subhashini
  • 114
  • 5