Alert Buttons not centered


#1

42%20AM

Hey everyone, for some reason the buttons in all of my alerts are not centered and I can’t figure out why. I haven’t added any cssClass options and this only occurs on ios, on android the buttons are perfectly centered. Any help is appreciated!


#2

Can you post the code that creates the alert?


#3
  <button (click)="test();">test</button>

test(){
    let alerts = this.alert.create({
      title: 'test',
      cssClass: 'alert',
      buttons: [{
        text: 'Dismiss',
        cssClass: 'alertbut'
    }]
  });
    alerts.present();
  }

I’ve made apps on ionic before and usually this would make a regular one button alert but for some reason all of my alerts are shifted to the right and i can’t figure out why


#4

What does the alertbut class look like?


#5

And the alert class?


#6

just put the button in a div and add the style attribute.

<div style="text-align:center">
 <button (click)="test();">test</button>
</div>

#7

I don’t think you can put html into alerts, can you?


#8

oh!! I didn’t saw that!!
But I think that button should be in html.


#9

Unfortunately, that only centers the button it doesn’t affect the alertsd


#10

What about the classes?


#11

What do you mean? There is no css connected to my button so I don’t know whats pushing it to the left


#12

You passed in this data when you created the alert. You’re telling it to style it with the cssClass ‘alert’ and the button with ‘alertBut’. Did you create these or is this a snippet taken from somewhere else?

Also, you can try opening up the devtools and inspecting the alert. See what styles are being applied.


#13

The alertbut class isn’t connected to any css but even so, this issue affects all of my alerts and that css class is only one specific alert. I’ll try the devtools and inspect it tho


#14

Thanks for the help everyone I finally got it! I used the dev tools and I found a div tag that was messing it up. I don’t know why because none of my alerts were inside a div tag but after deleting it from the main.css files my alerts are normal. Thanks again