CODEWITHSUNDEEP
cssangularjsangular-material
dim0_0n
dim0_0n

Reputation: 2494

Angular Material md-list flexing

I want to use Angular Material's md-list for showing elements, using responsive design. And my task is to show these items in 1 column if media device is small and in 3 columns if it's larger than small. I was thinkink of something like this:

<md-list layout="row" layout-wrap>
  <md-list-item flex="33" flex-sm="100" class="md-2-line" ng-repeat="item in items">
    <div class="md-list-item-text">
      <h3>{{occasionType.occasionType}}</h3>
      <p>{{occasionType.name}}</p>
    </div>
  </md-list-item>
</md-list>

But it doesn't work. Can someone help?

Upvotes: 0

Views: 3698

Answers (1)

Deepika Chalpe
Deepika Chalpe

Reputation: 404

Try using layout-sm="column" 

<div layout="row" layout-wrap  layout-sm="column">
<div flex="33" class="md-2-line" ng-repeat="item in items">
<div class="md-list-item-text">
  <h3>{{occasionType.occasionType}}</h3>
  <p>{{occasionType.name}}</p>
</div>
</div>
</div>

It works for me.

Upvotes: 3

Related Questions