Ionic contents are not aligning properly

Question

I have 3 buttons (Note: I have tried the same with other elements like 3 texts/labels/etc.)

first button should be at start (leftmost side of the screen),

second button should be at the middle of screen

3rd button should be at the end (rightmost side of the screen)

I was trying using class=“ion-justify-content-between”, but problem remains the same.

Here is screenshot :

Here is my code :

<ion-card>
  <ion-card-content>
    <ion-item>
      <ion-grid>
        <ion-row class="ion-justify-content-between">
          <ion-col >
            <div>
              <ion-button>ok</ion-button>
            </div>
          </ion-col>
          <ion-col >
            <div>
              <ion-button>ok</ion-button>
            </div>
          </ion-col>
          <ion-col>
            <div>
              <ion-button>ok</ion-button>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-card-content>
</ion-card>

[Note: you can also try without ion-card/ion-card-content/ion-item. I mean you can just keep the ion-grid and the problem is same]

Someone please tell me what went wrong?

Answer 1

Just add ionic utility classes in ion-col it's working as expected.

<ion-grid>
    <ion-row class="ion-justify-content-between">
      <ion-col class="ion-text-start">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
      <ion-col class="ion-text-center">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
      <ion-col class="ion-text-end">
        <div>
          <ion-button>ok</ion-button>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

Answer 2

https://forum.ionicframework.com/t/ionic-contents-are-not-aligning-properly/192655

Rapropos from ionic forum answered me that question. Link above. If you go there, please don't forget to check my comment reply, I did further fixes there after his answer. Thanks to him.

So here is .html

<ion-header>
  <ion-toolbar color="primary" class="ion-text-center">
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-item>
              <ion-input type="text" placeholder="User Name / Email" [(ngModel)]="id"></ion-input>
            </ion-item>
            <ion-item>
              <ion-input type="password" placeholder="Password" [(ngModel)]="password"></ion-input>
            </ion-item>
            <ion-item>
              <ion-checkbox color="secondary" checked slot="start"></ion-checkbox>
              <ion-label class="ion-margin-left">Remember me</ion-label>
            </ion-item>
            
              <div class="outerbox ion-margin-vertical">
                <ion-button color="tertiary" size="small" (click)="forwardToNextPage1()">Sign Up</ion-button>
                <ion-button color="primary" size="small" (click)="GetALogin()">Login</ion-button>
                <ion-button color="secondary" size="small" (click)="forwardToNextPage2()">Forgot Password?</ion-button>
              </div>

         
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

here is .css

.outerbox {
  display: flex;
  justify-content: space-between;
}

A very important note :

Do not put the div inside ion-item . If you do that, all buttons will go left like this

Use div alone. don't let anything else affect it.

Answer 3

the easiest way is to use flex.

#container{
display:flex;
justify-content:space-between;
}

<div id='container'>
              <ion-button>ok</ion-button>
           
              <ion-button>ok</ion-button>
            
              <ion-button>ok</ion-button>
</div>