CODEWITHSUNDEEP
ionic-frameworkresponsive-designgrid
Edoardo
Edoardo

Reputation: 619

what is the method to have 2 columns in a single row?

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

Upvotes: 1

Views: 6881

Answers (4)

Alejandro
Alejandro

Reputation: 3

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.

Upvotes: 0

Julian Sanchez
Julian Sanchez

Reputation: 51

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>

Upvotes: 2

Saibot
Saibot

Reputation: 21

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

Upvotes: 0

Marko
Marko

Reputation: 957

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>

Upvotes: 0

Related Questions