CODEWITHSUNDEEP
javascriptangularjsionic-framework
MasterProgrammer200
MasterProgrammer200

Reputation: 1021

How to create dynamic arrangement of cards in Ionic using ng-repeat

Currently my IONIC apps home page looks like:

Home Page

When the app is tablet-size, the cards stretch across the screen and take up a lot of unnecessary space. I would like the cards to be side by side, except that when the app is run on a phone, the cards should line up in a single column, like so:

On tablet -

[card 1] [card 2] [card 3] [card 4]
[card 5] [card 6] [card 7] [card 8]
[card 9] [card 10] [card 11] [card 12]
etc...

On Phone -

[card 1]
[card 2]
[card 3]
[card 4]
etc...

My question is: how do I change the following code (which uses ng-repeat) to create the desired dynamic layout of cards?

<div class="card" ng-repeat="schedule in vm.scheduleData | orderBy: '-ScheduleDate' | limitTo: 100"
        ng-click="vm.selectMasterBill(schedule.MasterBOLNumber)">
    <div class="item item-divider item-positive">
        Master BOL Number {{schedule.MasterBOLNumber}}
    </div>
    <div class="item item-divider">
        <p>Date scheduled: {{vm.parseDate(schedule.ScheduleDate)}}</p> 
    </div>
    <div class="item item-divider">
        <p>Scheduled by: {{schedule.ScheduleBy}}</p>
    </div>
    <div class="item item-divider">
        <p>Carrier code: {{schedule.CarrierCode}}</p>
    </div>
</div>

Upvotes: 1

Views: 2557

Answers (1)

MHX
MHX

Reputation: 1601

Use media queries in your stylesheets.

For example: your scss/css file would look something like this:

.responsive-card {
    width: 100%;
    float: left;
}

@media screen and (min-width: 768px) {
    .responsive-card {
        width: 25%;
    }
}

Don't forget to add the responsive-card class in your html:

<div class="card responsive-card" ng-repeat="schedule in vm.scheduleData">
    ...
</div>

Upvotes: 4

Related Questions