Ionic 2 Toast Message and CSS

Ionic Framework ionic-v3
1

I’m using a Toast component in a Ionic 2 project:

presentToast() {
    let toast = Toast.create({
      message: 'Thanks for signing up! NEWLINE Please, login now...',
      duration: 5000,
      position: 'top'
    });

    toast.onDismiss(() => {
      console.log('Dismissed toast');
    });

    this.nav.present(toast);
}

How can I add a new line in the message parameter?

I like an output like the following:

Thanks for signing up!
Please, login now…

I also configure this changes in scss file to get the Toast component with white background and black text:

.toast-container {
  background-color: white;
}

.toast-message {
  color: black;
}

How can I change the css to get transparency of Toast component? opacity? where?

2

You probably don`t need it anymore but maybe this will help someone else.

In your .scss file add this part of code

.toast-message {
  white-space: pre-line;
}

Now when you use \n you create a new line in your message string for example in your case

message: 'Thanks for signing up! \nPlease, login now...',

2 Likes
3

Awesome, I tried
.toast-message {
white-space: pre;
}

but if there were close button, the button pushed off the screen, but your proposed solution works :wink:

4

To maybe help save others some time, because I’ve been struggling with this issue for over an two hours, using Ionic v7 in combination with Angular v16.

I was finally able to get it to work by adding the following:

ion-toast::part(message) {
    --white-space: pre-line;
}

to globals.scss

Adding it to the SCSS of the component it appears in did not have an effect, as well as using the .toast-message selector.