CODEWITHSUNDEEP
ionic-frameworkionic4
Vik
Vik

Reputation: 9289

ionic 4: pushing contents towards the bottom of ion-content

i have my code like

<ion-header>
  <ion-toolbar>
    <ion-title><ion-row><ion-col text-center>MY APP</ion-col></ion-row></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
<div style="padding-top:300px;padding-left:20px">
      <ion-slides pager="false" [options]="slideOpts">
          <ion-slide>
              <ion-card>
                  <ion-card-header style="color:white">TRENDING</ion-card-header>
                  <ion-card-content>

                  </ion-card-content>
                </ion-card>
          </ion-slide>
          <ion-slide>
              <ion-card style="background-color:darkslateblue;opacity: 0.9;min-width:200px;height:200px">
                  <ion-card-header style="color:white">Events</ion-card-header>
                  <ion-card-content>

                  </ion-card-content>
                </ion-card>
          </ion-slide>
        </ion-slides>

  </div>
</ion-content>

if you see the div inside ion-content has a padding-top 300px. but this not really the right way to have my ion-slides always to the bottom. how do i achieve that?

Upvotes: 1

Views: 1832

Answers (1)

Bassam
Bassam

Reputation: 856

To change the position for any Dom there are several ways I will write two of these ways:

1- by using flex. (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

2- by using position and set bottom to 0; (https://www.w3schools.com/css/css_positioning.asp)

Upvotes: 1

Related Questions