CODEWITHSUNDEEP
angulartypescriptionic4
TPRammus
TPRammus

Reputation: 511

How to horizontally align content of ion-grid cell

When using ion-grid, how do I horizontally align the content of the cells to the left/right/center of the cell?

  <ion-grid>
    <ion-row>
      <ion-col class="ion-align-self-left">
        left
      </ion-col>
      <ion-col class="ion-align-self-right">
        right
      </ion-col>
    </ion-row>
  </ion-grid>

The content is always aligned to the left, I expect the text "right" to be aligned to the right of its own cell.

Upvotes: 2

Views: 1640

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

You just need to use the ion-text-end css class as documented here:

  <ion-grid>
    <ion-row>
      <ion-col class="ion-text-start">
        left
      </ion-col>
      <ion-col class="ion-text-end">
        right
      </ion-col>
    </ion-row>
  </ion-grid>

Renders as:

enter image description here

BTW: the flex option you were trying to use was the wrong class for that. In Ionic4 it's start and end not left and right.

Upvotes: 3

Related Questions