Ionic Popup position

ionic-v1
1

Hi,

I have customized the Popup css to have it in fixed position and horizontally aligned in the center of the screen. It displays correctly in Android device, but way of in iOS. Below is the css I have and the screenshot for iOS and Android. How can I fix the issue in iOS?

.credit-deny-popup .popup {
    position: fixed;
    top: 60px;
    margin-left:auto;
    margin-right:auto;
    width: 250px;
    height: 250px;
}
.credit-deny-popup .popup-title {
    font-weight: bold;
    font-size: larger;
    color: #FFFFFF;
}
.credit-deny-popup .popup-head {
    background-color: #387EF5;
}

Android Screenshot
Android

iOS Screenshot
26 AM

Thank you in advance!

2

I think by default, $ionicPopup shows up at the center for both ios and android. Can you delete your changes and try with the default.

3

Similar to what @thesourav said, ionic popups should be centered by default, so I’m not sure why you are trying to position it yourself.

But to solve your issue, I would open the app on iOS and then open up the Safari web inspector for your app to inspect the popup HTML element. Here, you can try changing the CSS to see what attributes you are missing. I would start with adding in

right : 0;
left : 0;

to see if that fixes your issue.

4

Thank you @thesourav and @DaDanny!

If I disable the keyboard scroll cordova.plugins.Keyboard.disableScroll(true);, the keyboard is on the top of popup as below in the iOS.

41 AM
Screen Shot 2017-11-06 at 7.55.41 AM.jpg332×600 51.1 KB

And if I set the disable scroll to false, the whole screen moves, and not just the popup window. It is not consistent like Android UI.

58 AM
Screen Shot 2017-11-06 at 8.21.58 AM.png564×1003 111 KB

Android UI looks same as the first screenshot posted above.

5

@DaDanny @thesourav adding left and right to css worked. Thank you!

1 Like
6

I’d actually recommend using a modal if you have an input form, that should prevent the keyboard from covering it and I believe it is more consistent with UI guidelines. But that’s just the approach I would take.

Also, I’m glad setting the left & right properties worked.