Ionic contents are not aligning properly

Ionic Framework ionic-v3
1

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 :

image
image1366×768 48.5 KB

Here is 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?

2

I get that it’s not exactly riveting reading, but I think it’s worth taking the time to study the box model, because you will run into hundreds if not thousands of problems like this over your career.

TL;DR: you have to make all the bits in your layout cooperate here, or just pare it down to essentials. The following should look like you wish it to:

<div class="outerbox">
  <ion-button color="primary">sined</ion-button>
  <ion-button color="primary">seeled</ion-button>
  <ion-button color="primary">delivered</ion-button>
</div>

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

A lot of thanks for you answer. It worked.

But there was another mistake : I called that < div > under an < ion - item > and all buttons went left side.

(bad) screenshot 1:

image
image1366×768 51.7 KB

(bad) code 1:

<ion-item>
<div class="outerbox">
                <ion-button color="primary">sined</ion-button>
                <ion-button color="primary">seeled</ion-button>
                <ion-button color="primary">delivered</ion-button>
              </div>
</ion-item>

(correct) screenshot 2:

image
image1366×768 51.7 KB

(correct) code 2:

<div class="outerbox">
                <ion-button color="primary">sined</ion-button>
                <ion-button color="primary">seeled</ion-button>
                <ion-button color="primary">delivered</ion-button>
</div>