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);
// ...