feat: allow for custom ion-toast positioning

[jordanpurinton]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request
Currently with the implementation of toasts in Ionic v4, we have no way of adding some padding or margin to an ion-toast. I'd like to be able to customize this position in order to adhere to the material design principle outlined here.

Describe Preferred Solution
Ideally, this would be something that could be added in the CSS custom properties.

[joelmeaders]

I see there is style applied directly to the ion-toast>div (below), but there's no "easy" way to modify this. In my example I'd like to move it up by 70px so it doesn't cover my ion-tabs.

Style when using 'bottom' position.

element.style {
    bottom: calc(8px + var(--ion-safe-area-bottom, 0px));
    opacity: 1;
}

Changing 8px to something like var(--ion-toast-y-offset, 8px) would be amazing.

I'm currently using the following in global.scss to do this and it's probably not the best way.

#ion-overlay-2 {
	top: -70px;
}

[jbae1024]

I do not know.... I use it like this. Is there any other problem?

css

.md .tabs-bottom {
  transform: translateY(-56px) !important;
}
.ios .tabs-bottom {
  transform: translateY(-50px) !important;
}
.md .header-top {
  top: 56px !important;
}
.ios .header-top {
  top: 44px !important;
}

ts

const toast = await this.toastController.create({
            message: 'This is message',
            position: 'bottom',
            duration: 1000,
            color: 'warning',
            cssClass: 'tabs-bottom'
        });
        toast.present();

[joelmeaders]

I do not know.... I use it like this. Is there any other problem?

That is much better! The issue with mine is that subsequent toasts aren't covered since ion-overlay-# increments on each call.

Thank you.

[bene-we]

I use a FAB in bottom tabbar, since that I have to translate by at least -64px .

I also noticed there is a slight shadow above the toast, a built in solution would be very nice!

[Yohandah]

I am in need of this too!

I'd like to add that it would be nice to have a right and left option as well for the desktop mode, and maybe by default bind the toast to the ion-content so it doesn't overlap with the toolbar.

Snackbar in wide layout
https://material.io/components/snackbars#placement

[darkguy2008]

4 months more and we can give this bug a happy birthday!

I mean, seriously. How hard it is to have the tabs show where they should? I have a tabbed interface (using ion-tabs) and the toast appears above the tabs, giving BAD UX as the user cannot switch between tabs until the toast has dismissed.

We're in Ionic 6 already. Any solutions to this?

[josuecaceres]

No sé.... Lo uso así. ¿Hay algún otro problema?

Css

.md .tabs-bottom {
transform: translateY(-56px) !important;
}
.ios .tabs-bottom {
transform: translateY(-50px) !important;
}
.md .header-top {
top: 56px !important;
}
.ios .header-top {
top: 44px !important;
}
Ts

const toast = await this.toastController.create({
message: 'This is message',
position: 'bottom',
duration: 1000,
color: 'warning',
cssClass: 'tabs-bottom'
});
toast.present();

this is enough for me, thank you

[darkdread]

Any solution for Ionic 5.x? We can select the container shadow part, but there's no way to target the wrapper with just CSS since it's in a shadow dom...

[map-lo]

@darkdread I found a solution for Ionic 5.x. Provide a custom enter animation including an offset for the tabs bar.

// ...
export const iosEnterAnimation = (baseEl: ShadowRoot, position: string, offset = 10): Animation => {
    const baseAnimation = createAnimation();
    const wrapperAnimation = createAnimation();

    const hostEl = baseEl.host || baseEl;
    const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;

    const bottom = `calc(-${offset}px - var(--ion-safe-area-bottom, 0px))`;
    const top = `calc(${offset}px + var(--ion-safe-area-top, 0px))`;

    wrapperAnimation.addElement(wrapperEl);

    switch (position) {
        case 'top':
            wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
            break;
        case 'middle':
            const topPosition = Math.floor(
                (hostEl as Element).clientHeight / 2 - wrapperEl.clientHeight / 2
            );
            wrapperEl.style.top = `${topPosition}px`;
            wrapperAnimation.fromTo('opacity', 0.01, 1);
            break;
        default:
            wrapperAnimation.fromTo('transform', 'translateY(100%)', `translateY(${bottom})`);
            break;
    }
    return baseAnimation
        .addElement(hostEl)
        .easing('cubic-bezier(.155,1.105,.295,1.12)')
        .duration(400)
        .addAnimation(wrapperAnimation);
};

// opts used as toastController.create(opts)
if (this.tabsVisible) {
    opts.enterAnimation = (baseEl: ShadowRoot) => iosEnterAnimation(baseEl, opts.position, 60)
}
const toast = await toastController.create(opts);
// ...

[angusho1]

@darkdread I found a solution for Ionic 5.x. Provide a custom enter animation including an offset for the tabs bar.

// ...
export const iosEnterAnimation = (baseEl: ShadowRoot, position: string, offset = 10): Animation => {
    const baseAnimation = createAnimation();
    const wrapperAnimation = createAnimation();

    const hostEl = baseEl.host || baseEl;
    const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;

    const bottom = `calc(-${offset}px - var(--ion-safe-area-bottom, 0px))`;
    const top = `calc(${offset}px + var(--ion-safe-area-top, 0px))`;

    wrapperAnimation.addElement(wrapperEl);

    switch (position) {
        case 'top':
            wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
            break;
        case 'middle':
            const topPosition = Math.floor(
                (hostEl as Element).clientHeight / 2 - wrapperEl.clientHeight / 2
            );
            wrapperEl.style.top = `${topPosition}px`;
            wrapperAnimation.fromTo('opacity', 0.01, 1);
            break;
        default:
            wrapperAnimation.fromTo('transform', 'translateY(100%)', `translateY(${bottom})`);
            break;
    }
    return baseAnimation
        .addElement(hostEl)
        .easing('cubic-bezier(.155,1.105,.295,1.12)')
        .duration(400)
        .addAnimation(wrapperAnimation);
};

// opts used as toastController.create(opts)
if (this.tabsVisible) {
    opts.enterAnimation = (baseEl: ShadowRoot) => iosEnterAnimation(baseEl, opts.position, 60)
}
const toast = await toastController.create(opts);
// ...

This worked perfectly for me, thank you. For anyone confused, remember to import the following:

import { createAnimation } from '@ionic/angular';
import { Animation } from '@ionic/angular';

EDIT: Do you know how I could accomplish this same functionality on Android?

[j4vs]

4 months more and we can give this bug a happy birthday!

I mean, seriously. How hard it is to have the tabs show where they should? I have a tabbed interface (using ion-tabs) and the toast appears above the tabs, giving BAD UX as the user cannot switch between tabs until the toast has dismissed.

We're in Ionic 6 already. Any solutions to this?

I found a solution for Ionic 6

Ts

this.toastController.create({
      message: 'Message to show',
      cssClass: 'customToast',
      duration: 1000,
      position: 'top'
});

css

ion-toast.customToast {
    --background: none;
    &::part(container) {
        background: #FF812D;
        color: #fff;
        border-radius: 10px;
        border: 2px solid #fff;
        font-size: 18px;
        margin-top: 50px;
    }
}

Now you can change the top or bottom or font size or other properties

[ryubal-sh]

For me this was more than enough.

ion-toast {
	transform: translateY(-80px); // I'm using taller than normal tabs
}

[scriptify]

For React users, I've found a dirty workaround. This should really be supported by design.
ref doesn't seem to be called for me, so I had to use querySelector.
⚠ Don't try this at home.

const DangerousToast = ({ ... }: Props) => {
  useEffect(() => {
    if (!isVisible) return;
    const toastElem = document.querySelector('ion-toast');
    if (toastElem) {
      const style = document.createElement('style');
      style.innerHTML = '.toast-wrapper { bottom: 100px !important; }';
      toastElem.shadowRoot?.appendChild(style);
    }
  }, [isVisible]);

  return (
    <>
      <IonToast
        isOpen={...}
        message="Blabla"
        position="bottom"
      />
    </>
  );
};

[fbl773]

It would be sweet if I could just shove the toast in a <div> or something on my page. If I could define the toast in my html, that would be ideal.

[judsonmusic]

I am using angular with ionic and this is the best solution ive come up with.
async presentToast(position: 'top' | 'middle' | 'bottom', message: string) {

await this._toastController
   .create({
     message,
     duration: 1500,
     position: position,
     color: 'success',
     cssClass: `toast-custom-${position}`
   })
   .then(toast => {
     toast.present();
   });
}

  :ng-deep .toast-custom-bottom {
  transform: translateY(-50px) !important;
}

Notice i am using a custom class that is dynamically created but i can style however i want to. Cheers :)

[0x7061]

@judsonmusic Great find. Sadly the ::ng-deep pseudo-class is deprecated now.

[averyjohnston]

Hi folks, this feature has been added via #28248 and will be available in a future minor release of Ionic. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.