CODEWITHSUNDEEP
htmlcssangularjsionic-frameworkionic-view
Desmoline Awa
Desmoline Awa

Reputation: 533

Ionic - How to turn an ion-list into a grid

I have an ion-list of clickable items that I want to turn into a grid of square items (boxes) and I don't know how. Please help.

Here is my list:

<ion-view>

  <ion-content>
     <ion-list >
      <ion-item ng-repeat="letter in letters" href="#/letters/{{letter.number}}" class="letters-list">
        {{letter.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Please how to turn this into square item boxes?

Upvotes: 0

Views: 8888

Answers (2)

jcoomer
jcoomer

Reputation: 41

Maybe this will help you:

<ion-list>
<ion-grid>
  <ion-row>
    <ion-col <!-- Specify column size and start your loop here -->>
      <ion-item>
        {{letter.title}}
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

Everything will be put in a single row, but by specifying the col width it will wrap. From there you can style the individual item or its contents.

Hope this gets you a little closer.

Upvotes: 1

Ram_T
Ram_T

Reputation: 8484

Add classes with respect to the device size. class="col col-50" used to show every item size will be 50% of the total width. for more info http://ionicframework.com/docs/components/#grid

<ion-view>

  <ion-content>
     <ion-list class="row">
      <ion-item class="col col-50" ng-repeat="letter in letters" href="#/letters/{{letter.number}}" class="letters-list">
        {{letter.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

If you are unable to do it with ion tags, try to do it with div tags.

  <ion-content>
     <div class="row">
      <div class="col col-50" ng-repeat="letter in letters" href="#/letters/{{letter.number}}" class="letters-list">
        {{letter.title}}
      </div>
    </div>
  </ion-content>
</ion-view>

on of them must work. Of course both.

Upvotes: 2

Related Questions