CODEWITHSUNDEEP
ionic-frameworksassionic2ionic3
hopper
hopper

Reputation: 4348

Ionic Align image to bottom of ion-col

I want to align the images to the bottom of the ion-col element. Here is the code:

 <ion-grid>
<ion-row>
  <ion-col col-6>
    <img src="assets/imgs/mobile-icon.png" />
  </ion-col>
  <ion-col col-6>
    <img src="assets/imgs/laptop-icon.png" />
  </ion-col>
</ion-row>
<ion-row>
  <ion-col class="object-label" col-6>
    Smartphone
  </ion-col>
  <ion-col class="object-label" col-6>
    Ordinateur
  </ion-col>
</ion-row>
<ion-row>
  <ion-col col-6>
    <img src="assets/imgs/tablet-icon.png" />
  </ion-col>
  <ion-col col-6>
    <img src="assets/imgs/camera-icon.png" />
  </ion-col>
</ion-row>
<ion-row>
  <ion-col class="object-label" col-6>
    Tablette
  </ion-col>
  <ion-col class="object-label" col-6>
    Appareil photo
  </ion-col>
</ion-row>
<ion-row>
  <ion-col col-6>
    <img src="assets/imgs/headphones-icon.png" />
  </ion-col>
  <ion-col col-6>
    <img src="assets/imgs/other-icon.png" />
  </ion-col>
</ion-row>
<ion-row>
  <ion-col class="object-label" col-6>
    Accessoires
  </ion-col>
  <ion-col class="object-label" col-6>
    Autres
  </ion-col>
</ion-row>

I could do it using column attributes stated in the docs: https://ionicframework.com/docs/api/components/grid/Col/

but for some reason it's not working.

Upvotes: 2

Views: 4926

Answers (1)

Utpaul
Utpaul

Reputation: 2007

Its working fine for me. Please check it

<ion-grid>

      <ion-row>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/mobile-icon.png" />
          </div>
        </ion-col>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/laptop-icon.png" />
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="object-label" col-6>
          Smartphone
        </ion-col>
        <ion-col class="object-label" col-6>
          Ordinateur
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/tablet-icon.png" />
          </div>
        </ion-col>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/camera-icon.png" />
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="object-label" col-6>
          Tablette
        </ion-col>
        <ion-col class="object-label" col-6>
          Appareil photo
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/headphones-icon.png" />
          </div>
        </ion-col>
        <ion-col col-6 align-self-end>
          <div>
            <img src="assets/imgs/other-icon.png" />
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col class="object-label" col-6>
          Accessoires
        </ion-col>
        <ion-col class="object-label" col-6>
          Autres
        </ion-col>
      </ion-row>
    </ion-grid>

Upvotes: 4

Related Questions