A VERY basic question:
How do I change the CSS of a toast?
I want to change the content max-width on the toast message, because the close button get pushed of the screen. So one would think to add .toast-content in the global.scss file and it should work…
No, not with Ionic. With Ionic there is no simple solution!!!
And no, I don’t want to add cssClass property to EVERY toast created, I want to change this globally…
you can do by creating service for toast.
Thanks.
Yes, considering writing my own toaster.
I assume it’s not using the CSS, because the ion-toast is outside the ion-router-outlet element
I am having this same issue. Here is what my toast looks like when a “word” is too long for the div.toast-content with the current styling:
here is what it should look like with the proper wrapping:
This normally isn’t a problem, because we normally use the Toasts for human readable alerts, but in this case, we want to display a URL, where wrapping it would be acceptable for our users as long as they can read the toast and close it when they are done.
In the chrome dev tools, we can fix this issue by adding a style to the div.toast-content of “overflow: hidden;”, but we can’t apply this style in the app, likely due to the toast being inside #shadow-root.
Hopefully this helps explain the issue a bit better so someone can help out.
