CODEWITHSUNDEEP
cssionic-frameworkionic2android-toast
Pavan Alapati
Pavan Alapati

Reputation: 635

ToastController custom position in ionic

We are creating Ionic-Native mobile app.We are using ToastController (ToastController).We used position: 'top' .But it overlaps to status bar.So we want custom position .We tried like this 

let Errortoast = this.toastCtrl.create({
      message: 'Please try again later',
      duration: 3000,
      cssClass: 'toast',
      position: 'top'
    });



    .toast{
    margin-top: 70px;
  }

But no luck .Any idea for Custom position ?.

Upvotes: 3

Views: 6631

Answers (3)

user1383029
user1383029

Reputation: 2125

Translate did not work in my case, because I needed to have the footer of my app clickable (transform does not really move the elememnt, so it was just overlapping).

It worked with this SCSS:

ion-toast {
    height: calc(100% - #{$my-footernav-height});
}

Upvotes: 2

Judson Terrell
Judson Terrell

Reputation: 4306

For angular and ionic...

this.toastCtrl.create({
 message: 'Please try again later',
 duration: 3000,
 cssClass: 'toast-custom-class',
 position: 'top'
}).present();

::ng-deep .toast-custom-class {
   transform: translateY(-50px) !important; //or whatever you want here.
}

Upvotes: 2

Stephan Strate
Stephan Strate

Reputation: 1421

You can use transform: translateY(70px); as a CSS property to move the Toast down.

Here is a full code example:

yourPage.ts

this.toastCtrl.create({
    message: 'Please try again later',
    duration: 3000,
    cssClass: 'yourClass',
    position: 'top'
}).present();

yourPage.css

.yourClass {
    .toast-wrapper {
        transform: translateY(70px) !important;
    } 
}

Note: This CSS code snippet needs to be out of the page CSS because the .toast-wrapper is outside of the page.

Upvotes: 6

Related Questions