How to set style of the Toast

Question

The toast is displayed on top of the tabs. How can I make a tab on top of a toast?

Answer 1

The answer probably comes late, but in case somebody else will need to solve it:

HTML of ion-toast looks like this:

ion-toast DOM

There are:

• ion-toast: covers whole page as invisible wrapper for toast message itself
• .toast-wrapper: which represents the toast message itself, positioned within ion-toast

.toast-wrapper is inside of Shadow DOM and doesn't have part attribute set, so we can't manipulate with it.

But we can manipulate ion-toast element itself. So what you can do it to adjust it's size, so .toast-wrapper will be rendered at different place.

For example like this:

ion-toast {
  height: calc(100% - 70px);
}

Answer 2

You can try overwriting this class in your scss file.

.toast-ios,.toast-md {
.toast-wrapper {
    &.toast-bottom {
        bottom: 46px;
    }
}

but you can put out of the scss page

for example:

 page {
 } 
 .toast-ios,.toast-md {
    .toast-wrapper {
        &.toast-bottom {
            bottom: 46px;
        }
    }
  }