1

i'm trying to develope an hybrid app with ionic 2, i don't have a lot of experience in this scope, but i have tried to develope small project. I need to put two columns (50%) in a single row and I try this but it doesn't work for me:

    <div class = "row">
       <div class = "col col-50">col 1</div>
       <div class = "col col-50">col 2</div>
    </div>

Can someone help me? Thank's

Edoardo
  • 599
  • 2
  • 9
  • 26

4 Answers4

2

This worked perfect for my:

<ion-grid>
  <ion-row >
    <ion-col col-6>
      ...
    </ion-col>
  </ion-row>
</ion-grid>

If you use an *ngFor place it in your ion-col:

<ion-grid>
   <ion-row>
     <ion-col col-6 *ngFor = "let item of items">
       ...
     </ ion-col>
   </ ion-row>
</ ion-grid>
Julian Sanchez
  • 51
  • 5
0

You are using div, and you should be using span if you want them in same line

<div class="row">
    <span class="col-50"> </span>
    <span class="col-50"> </span>
</div>
Marko
  • 917
  • 9
  • 14
  • i've tried it and now the columns are on the same line but they don't be the 50% of width – Edoardo Oct 26 '16 at 13:54
  • you gonna need a css for that – Marko Oct 26 '16 at 14:04
  • Well actually if you wanna make width on spans you gotta make em display:inline-block or a display:block and and that point you better of with just goin for div. See example http://jsfiddle.net/N9mzE/1/ – Marko Oct 26 '16 at 14:27
  • http://stackoverflow.com/questions/10085557/set-percentage-width-for-span-element – Marko Oct 26 '16 at 14:29
  • Just google span 50% width or something like that untill you get the css that works for you. I would've done it for you but no time at the momment – Marko Oct 26 '16 at 14:30
  • Let me know what worked for you when you get it so I can update the answer for future SOers – Marko Oct 26 '16 at 15:02
0

If you are using Ionic 2 try this:

<ion-row>
      <ion-col width-50></ion-col>
      <ion-col width-50></ion-col>
</ion-row>

but it should be mentioned on their site: https://ionicframework.com/docs/v2/components/#grid

Saibot
  • 21
  • 1
0

Ionic automatically evenly distributes the columns width if none specified, at least for Ionic3 an onwards

<ion-row>
  <ion-col>stuffhere</ion-col>
  <ion-col>stuffhere</ion-col>
<ion-row>

That's the tidy and effective way.

Alejandro
  • 3
  • 5