i found a helpful resource on applying cssClass to my toast component.
within my HTML, I have buttons:
<button ion-button (click)="presentToast()"> toast</button>
Here is the code snippet from my .ts file:
presentToast() {
let toast = this.toastCtrl.create({
message: "Press again to exit",
cssClass: "bottomToast",
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
In my app.css file, I specified the styles for `.bottomToast`:
.bottomToast{
.toast-md .toast-wrapper {
position: absolute;
right: 0;
left: 0;
z-index: 10;
display: block;
margin: auto;
width: 40%;
max-width: 700px;
border-radius: 35px;
background: gray;
}
.toast-md .toast-message {
padding: 19px 16px 17px;
font-size: 1.5rem;
text-align: center;
}
}
Upon inspecting the toast element, I noticed the following structure was generated:
<ion-toast role="dialog" class="toast-md bottomToast" aria-labelledby="toast-hdr-0" style="z-index: 19999;"><div class="toast-wrapper toast-bottom" style="transform: translateY(0%);"> <div class="toast-container"> <!--template bindings={ "ng-reflect-ng-if": "Press again to exit" }--><div class="toast-message" ng-reflect-id="toast-hdr-0" id="toast-hdr-0">Press again to exit</div> <!--template bindings={ "ng-reflect-ng-if": null }--> </div> </div></ion-toast>
However, when I remove the `.bottomToast` class and use only `.toast-md .toast-wrapper` and `.toast-md .toast-message`, the toast functions correctly.
I must have made an error in defining the CSS rules within the `bottomToast` class. I need assistance getting the toast styling to work as intended.