Adding button to alert makes Android and Windows alert take entire screen width

Ionic Framework ionic-v3
1

In my app I use the AlertController to create an alert. The problem is, when I add a button to my alert, the Android and Windows versions of the alert take up almost the entire screen. For some reason, I’m not having this issue with iOS. Here are some images to understand :

With a button :

Screenshot (16)
Screenshot (16).jpg1590×895 145 KB

Without a button :

Screenshot (17)
Screenshot (17).jpg1585×892 213 KB

Clearly, and for some reason, the android and windows buttons are gigantic.

My code :

       let alert = this.alertCtrl.create({
       title : 'Hi',
       message : 'What up?',
       buttons : [{text:"OK"}]  // this line commented out to remove button
       });
       alert.present();

How do I resolve this bug ( if I can call it that )

1 Like
2

Your code is incorrect:
let alert = this.alertCtrl.create({
title : ‘Hi’,
message : ‘What up?’,
buttons : [‘OK’] // this line commented out to remove button
});
alert.present();

3

It’s still not working . And how would I add properties like the handler to the button unless there are objects in the buttons array ?

4

have a look at https://ionicframework.com/docs/api/components/alert/AlertController/ and i will suggest to use latest stable version of ionic.

5

If you check my code, the syntax does follow the documentation. I’m still facing this frustrating issue and I’m desperate for a fix

6

Do you have any custom CSS in your app? I am now suspecting that you might have something defined at a top level of your styling that is rippling into the Alert.

As with way styling issue, open up the Chrome dev tools and look at the css that is being applied. Drill down through the cascade and see what is being applied.

7

Thank you! This was a great idea. I checked the developer tools and it looks like under the .button-inner class the height was set to 100%. Going to change that to 5% or something now. Thank you again :slight_smile: