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

#1

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.

#2

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

#3

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();

    console.log(baseEl.lastChild);

    const wrapperAnimation = new AnimationC();
    wrapperAnimation.addElement(baseEl.querySelector('.toast-wrapper'));
    wrapperAnimation
      .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
      .addElement(baseEl)
      .easing('ease')
      .add(wrapperAnimation)
      .duration(600)
    );
  }

  //----------------------------------------------------------------------------------------------//  

#4

Here is it in action…

Toast with animation, text centered, 20% from top

#5

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 ?

#6

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.

#7

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