How can I style the text within an ionic alert?

Ionic Framework ionic-v3
1

So I have some information that I want to display, but “\n” doesn’t break the line, nor can I change the font size or color. I understand there is a cssClass option, however the docs do a very poor job of explaining that–I don’t even know if it’s applicable for my needs.

2

Try setting it and seeing what happens.

  popAlert(): void {
    let alert = this._alerts.create({
      message: "hello\nworld",
      cssClass: 'foo',
    });
    alert.present();
  }

<button ion-button (click)="popAlert()">pop alert</button>

// App Global Sass

.foo .alert-message {
  white-space: pre;
}
4 Likes
3

That works! Why does it have to be in the global sass though?

4

Because in the DOM, the alert is outside the current page, so it wouldn’t get caught in the page’s SCSS, which is limited to the selector assigned to that page. You can track these sorts of things down by using the Elements feature of Chrome’s Developer Tools (I’m sure there are other ways as well, but that’s what I use).

2 Likes
5

If you look at bottom of this page (http://ionicframework.com/docs/v2/api/components/alert/AlertController/), you will see a whole slew of SASS variables you can define as well.

6

Interesting… Is there also a way that I can left align the text? On iOS it centers the text even with text-align: left;. Also, are there ways that I can bold certain words?

7

@stmc225

Did you ever find answers to your questions re: bolding certain words etc. The documentation on this stuff is scant.

1 Like
8

To Bold the text just enclose your text(may be title or sub title) inside Tags. To go to next line use

9

Did you get any answer to align the text to left.