search

oitozero / ngSweetAlert

AngularJS wrapper for SweetAlert
MIT License
616 stars 160 forks source link

ngSweetAlert is not centered horizontally #44

Closed esetnik closed 9 years ago

esetnik commented 9 years ago

the div width is 478px and margin-left is -239px.

.sweet-alert { background-color: white; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 478px; padding: 17px; border-radius: 5px; text-align: center; position: fixed; left: 50%; top: 50%; margin-left: -256px; margin-top: -200px; overflow: hidden; display: none; z-index: 99999; }

dannygoncalves commented 9 years ago

I noticed that too, also it doesn't respond pretty well in responsive mobile sizes, had to drop it's usage for that

esetnik commented 9 years ago

I discovered that the issue is due to box-sizing that was getting set by bootstrap. I had to override the behavior to make sweet-alert math work.

.sweet-alert {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
oitozero commented 9 years ago

Related to https://github.com/t4t5/sweetalert.

brynner commented 5 years ago

Same behaviour while using SweetAlert for React. Thanks @esetnik