0

Tenho o seguinte código abaixo

 let alert = this.alertCtrl.create({
  message: '<div><img height="50" src="assets/imgs/success.png"></div><div>' +
  '<p>Cadastrado com sucesso!!!</p>' +
  '</div>',
   buttons: [{
    text: 'OK',
    handler: data => {
      console.log('Ok clicked');
    }
  }]
});
alert.present();

Onde estou usando importando o AlertController desta forma:

import { AlertController } from 'ionic-angular';

Veja a imagem como fica:

inserir a descrição da imagem aqui

Gostaria de centralizar o conteúdo do AlertController, porém tentei de algumas formas mas não funciona, como por exemplo desta forma, mas não reconhece.

Existe alguma forma de centralizar conteúdo da div no AlertController?

4
  • Como exatamente gostaria que ficasse? Você tem 2 elementos divs 1 elemento img e um elemento p, não entendi qual exatamente quer alinhar no centro, é centro vertical horizontal ou ambos?
    – MagicHat
    Commented 5/12/2017 às 16:32
  • @MagicHat alinhar tudo. Aliás, menos o botão OK. Ou talvez também. huehe
    – viana
    Commented 5/12/2017 às 16:44
  • Sei lá tenta : <div style="width:70%;float:none;display:block;margin:0 auto;text-align:center;"><img height="50" src="assets/imgs/success.png">' + '<p>Cadastrado com sucesso!!!</p></div>'...
    – MagicHat
    Commented 5/12/2017 às 16:53
  • @MagicHat já tinha tentando assim, mas não funciona.
    – viana
    Commented 5/12/2017 às 17:06

2 Respostas 2

1

Você precisa definir uma classe css pro seu AlertController:

Exemplo:

 let alert = this.alertCtrl.create({
      message: '<div><img height="80" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg"></div><div>' +
      '<p>Cadastrado com sucesso!!!</p>' +
      '</div>',
      buttons: ['Dismiss'],
      cssClass: 'custom-alert',
    });
    alert.present();
 }

Repare que na criação do alerta eu tenho um atributo cssClass no qual passo uma classe css. O css ficaria dessa forma:

page-home {}

.custom-alert .alert-message{
    text-align: center;
    overflow: hidden;
}

OBS:. Note que o css não estão dentro da estilização da página, ou seja, ele tem que ser separado pois o componente alerta não é renderizado dentro da sua página:

inserir a descrição da imagem aqui

Nesse exemplo usei um text-align: center para alinhar os componentes, mas nada lhe impede de customizar o css do jeito que você preferir.

Resultado:

inserir a descrição da imagem aqui

2
  • hahaha... eu tava colocando a classe dentro da page-home! Por isso não estava funcionando. Você pode complementar sua resposta falando porque deve ficar fora da page-home no css? Deu certo aqui. =D
    – viana
    Commented 6/12/2017 às 10:29
  • @acklay opa, posso sim. Commented 6/12/2017 às 11:18
-3

Certamente cheguei tarde... mas encontrei esta resposta na documentação oficial: https://ionicframework.com/docs/api/alert: "Observação Se você estiver criando um aplicativo Ionic Angular, os estilos precisam ser adicionados a um arquivo de folha de estilo global.". Veja que isso se refere ao component alert.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .