ToastController custom position in ionic

Question

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 ?.

Answer 1

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.

Answer 2

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.
}