CODEWITHSUNDEEP
htmlcssionic-framework
artdias90
artdias90

Reputation: 735

ionic - wrap multiple elements in a row

I just started using Ionic, sorry for my low understanding on the toolkit. I'm working with Angular, so I got an array in my HTML via ng-repeat, which I don't know how big will be. How can I make sure I'll have each element with 1/3 of the viewport, and wrap left to each other and jump to next row after 3 elements?

I can't use row class since I don't know how many elements I will have in the end. 'col' class seems not to be inline-block or left-floated, so the elements don't wrap around.

note: I could easily inject my own CSS, but I'm sure Ionic itself can handle this, right?

Upvotes: 2

Views: 729

Answers (1)

LeftyX
LeftyX

Reputation: 35587

Let's say in your controller you're loading a list of images:

$scope.images = [];

In your view you can create one row each 3 elements using ng-if and use a column .col-33 which is 33.3% of your view. 

<div class="row" ng-repeat="image in images" ng-if="$index % 3 === 0">
  <div class="col col-33" ng-if="$index < images.length">
    <img ng-src="{{images[$index].src}}" width="100%" />
  </div>
  <div class="col col-33" ng-if="$index + 1 < images.length">
    <img ng-src="{{images[$index + 1].src}}" width="100%" />
  </div>
  <div class="col col-33" ng-if="$index + 2 < images.length">
    <img ng-src="{{images[$index + 2].src}}" width="100%" />
  </div>
</div>

In each column you need to check if you've reach the length of the array.

You can see how it works here.

Upvotes: 2

Related Questions