Customize Ionic 4 toast css [position, text-position]


Hi All,
I am using ionic 4. My application has tabs at the bottom. I am using toast at the bottom of my page whenever an operation is completed. I would like to find out how I can shift the toast slightly higher so that my tabs component will not be partially covered by the toast at the bottom when an operation is completed.

Current limitation now:

Hope to achieve this.

Please advise and also if there is any option to center the text msg in the toast would be perfect. Thank you.


Alright. Got my own hack around it. Finally. I wish Ionic toast can have a property to define its custom position.


If you use a custom animation you can set css properties for the toast, including text alignment, and you have to set the vertical position because it defaults to “top”…See the .beforeStyles property below…

  export function toastEnter(AnimationC: Animation, baseEl: HTMLElement, opts?: any) {
    const baseAnimation = new AnimationC();


    const wrapperAnimation = new AnimationC();
      .fromTo('opacity', '0', '1')
      .fromTo('transform', 'scale3d(1.5,1.5,1.5) rotate(90deg)', 'scale3d(1,1,1) rotate(0deg)')
      .beforeStyles({ 'text-align': 'center', 'top': '20%' })

    return Promise.resolve(baseAnimation



Here is it in action…

Toast with animation, text centered, 20% from top


Looks good. Hey @IonicGeoff how do u add ur custom function into ur application? Do u just add it as a custom ts and import it into ur page or ?


Just follow these instructions, that Joshua Morony wrote for a modal window. The same technique can be used for any window (Toast, Alert etc) which has an animation method available.


wow! Got it working with the method that u suggested. Thanks so much man! Appreciate it.