Ionic toast is not appearing properly after upgrading to V7

Ionic Framework
1

After updating to V7, my toasts are only semi appearing down the bottom of my device.

Does anyone have an idea as to why this is happening?

image

2

You are going to have to provide more information for us to help. A reproduction on StackBlitz is a good start.

I didn’t have any issues with my toasts when upgrading to Ionic v7 on my Vue app. However, I know there is an overlap issue when using tabs (which was present prior to v7).

We have the following code to move the toasts above the tabs.

.md .toasts-bottom {
    transform: translateY(-56px) !important;
}
.ios .toasts-bottom {
    transform: translateY(-50px) !important;
}

The new toast positioning can probably be used now.

3

No luck unfortunately.

4

FYI - It’s .toast-bottom not “toasts”

@twestrick This fix works if i have inside the chrome dev tools but for some reason the CSS isn’t being picked up if I put it in my global.scss file. No clue why

5

Looks like the toast-wrapper is not exposed as a shadow part… nightmare. Does anyone know how to style this element ?

6

Ahh, forgot to mention I am using a toastController and setting cssClass to toast-bottom so it’s a custom class.

const myToastController = await toastController.create({
    message: toast.message,
    color: this.getColorFromType(toast.type),
    buttons: buttons,
    position: 'bottom',
    duration: toast.duration,
    cssClass: 'toasts-bottom',
})

To modify the Shadow DOM try the code I posted over here - Ionic change causes css to stop working - any way to modify shadow dom to fix it? - #4 by twestrick.

7

Yeh your solution with the custom css class doesn’t work because this change needs to go onto the .toast-wrapper child element of the shadow dom, not the parent ion-toast element.

8

any idea what I am doing wrong here?

                enterAnimation: this.animationService.showToastAnimation,
                leaveAnimation: this.animationService.hideToastAnimation,
                buttons: [
                    {
                        text: this.translationService.translate("close"),
                        side: "end",
                        handler: () => {}
                    }
                ]
            });
            toast.present();
            let toastBottom: HTMLElement = toast.shadowRoot.querySelector('.toast-bottom');
            if (toastBottom) {
                toastBottom.style.transform = "translateY(-56px) !important";
            }
9

I’m using the custom class in an Ionic Vue production app :sweat_smile:

Here is an example - IonToast above the tabs - StackBlitz

10

Thanks, now I have no idea why my toast is appearing in the shadow-root in angular. Your example is outside the shadow root

11

Interesting. Here is a working Angular example. You do need to put the styles in the global.css file.

13

EDIT - False alarm. My animations were causing havoc with ion toast. Removing these solved the issue

1 Like