Styling ionic 2 toast

toast ionic2
Bill Noble picture Bill Noble · May 9, 2016 · Viewed 38.3k times · Source

Is there any way to style the text message within an ionic 2 toast?

I have tried this:

But clearly you can't use html in the text so I am guessing the answer to my question is no?

Answer

Burhan Gül picture Burhan Gül · Nov 23, 2016

You must add 'cssClass: "yourCssClassName"' in your toastCtrl function.

 let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true,
      cssClass: "yourCssClassName",
    });

than you can add any feature to the your css class. But your css feature went outside the default page'css. Exmp:

   page-your.page.scss.name {
     //bla bla
    }
 .yourCssClassName {
   text-align:center;
  }

Related questions

How to display Toast in Android?

I have a slider that can be pulled up and then it shows a map. I can move the slider up and down to hide or show the map. When the map is on front, I can handle touch events …

Read More
Use Toast inside Fragment

I'm trying to show a Toast Message when user click on a Button inside a Fragment. The problem is I cannot access the activity to show the Toast on it. Here's the source of Fragment: public class FrgTimes extends Fragment { …

Read More
How to change position of Toast in Android?

When I use Toast to display some popup text on the screen, it displays the text a little bit above the bottom of the screen, which is the default position. Now I want to display it in the middle of …

Read More