-2

Is it possible to make a vertical list using onsen-ui? Currently lists only go in a single column - i would like them to go 4 columns (items) per row while using tablets and to be single column on mobile. How can achieve that?

Kristis
  • 389
  • 3
  • 16

1 Answers1

1

You can use the grid components to make two columns:

  <ons-row>
    <ons-col>
      <ons-list>
        <ons-list-item ng-repeat="item in [1,2,3, 4, 5, 6, 7, 8, 9, 10]">
          {{ item }}
        </ons-list-item>
      </ons-list>
    </ons-col>
    <ons-col>
      <ons-list>
        <ons-list-item ng-repeat="item in [11,12,13, 14, 15, 16, 17, 18, 19, 20]">
          {{ item }}
        </ons-list-item>
      </ons-list>
    </ons-col>
  </ons-row>

Please have a look at this example: http://codepen.io/argelius/pen/raPpaY

Andreas Argelius
  • 3,604
  • 1
  • 13
  • 22