How to change css of toast content?

Ionic Framework
1

I have added toastController to app for which I have to change the css of toast .
I have added cssClass to toastController , here is my code

 this.backToast = await this.toastController.create({
      message: "Do you  really want to exit app?",
      position: "middle",
      cssClass: "backtoast",
      buttons: [
        {
          text: "Cancel",
          role: "cancel",
          handler: () => {},
        },
        {
          side: "end",
          text: "Ok",
          handler: () => {
            console.log("app exit");
            navigator["app"].exitApp();
          },
        },
      ],
    });

and here is my css

.backtoast {
  --width: 300px;
  --button-color: #ffffff;
  --height: 100px;
  --border-radius: 17px;
}

now it is showing like below.
toast

how can I change the position of toast-content and buttons? I have to show message in one line and button in line below.

Thank you.

2

Hi,

Try --white-space:nowrap; in .backtoast class.

3

Hi there,
thank you for reply, I tried adding --white-space:nowrap; in .backtoast class.this made first sentence in one line, but is there any way by which I can move “Cancel” and “ok” button in second line? below my message

image

thank you

4

I suggest to use AlertController rather than ToastController