CODEWITHSUNDEEP
htmlcssangular-material
Serhiy
Serhiy

Reputation: 1981

How to view items in few columns?

I use angular material . view items in one column: enter image description here

But I want to view it in few columns when I expand parent area. How to do it?

html code:

<md-content>
 <div layout="row">
    <div layout="column" class="itemsList padding-left-30" ng-if="vm.timeLineShow">
        <md-whiteframe class="md-whiteframe-8dp capitalize itemsInList padding-top-10 "
                       ng-repeat="item in vm.workItems | filter:search">{{item.name}}
        </md-whiteframe>
    </div>

    <!-- In this div I would like to view few columns with items-->
    <div  ng-if="!vm.timeLineShow"  flex class="expandedItems">
        <md-whiteframe class="md-whiteframe-8dp capitalize itemsInList padding-top-10 "
                       ng-repeat="item in vm.workItems | filter:search">{{item.name}}
        </md-whiteframe>
    </div>
</div>

Upvotes: 1

Views: 45

Answers (1)

Valery Kozlov
Valery Kozlov

Reputation: 1577

just use some css styling with flexbox

.itemList{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

http://codepen.io/anon/pen/ZpZmXO

Upvotes: 1

Related Questions