issue(prompt alert): Should show in middle of the screen as per native alert

[dylanvdmerwe]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[ ] bug report
[x] issue
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
A prompt alert on a large device like an iPad (on iOS) is being displayed at the top half of the screen:

I am assuming this is done because then the keyboard appears, the alert will be in the right place.

Expected behavior:
This needs to work more like a native app. The prompt to appear in the center of the screen. When the software keyboard opens up, the alert needs to slide into the correct position near the top of the screen.

Steps to reproduce:
Create any prompt alert on an iPad and note it's positioning.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[AmitMY]

The reasoning: (here)

this alert has a text input and it's on a mobile device so we should align
the alert up high because we need to leave space for the virtual keboard
this also helps prevent the layout getting all messed up from
the browser trying to scroll the input into a safe area

The new keyboard fixes might fix this, as "alert padding when it has text-inputs #10187 (fix: new keyboard plugin)"

[shawnlan]

@AmitMY so we can have prompt alert in the middle of the screen now?

[AmitMY]

@shawnlan

The new keyboard fixes might fix this

This needs device testing, which I can not do myself.

[davorpeic]

This is also kinda annoying on iphone too, can we help testing something? I have latest keyboard plugin

[AmitMY]

Currently it still is with a fixed top.
If you can change it for yourself, and it works well on an iPhone, let us know, and let’s make a PR of it.

[davorpeic]

Ok, at this moment it is not critical, if I do something will let you know. thanks

[Tyler-Darby]

We are facing this issue as well. Not critical for us at the moment either, but it would be nice to see this resolved. This doesn't happen on Android for us, only iOS.

I know there is some reworking with the keyboard plugin coming out soon involving WKWebView, maybe this could be worked in with that?

[DorthyS]

I am having this issue too

[vzts]

It happens in Android 6.0.1 as well, was kinda confused for a moment.

[brunohnq]

I've override the "alert-top" class with the code below:

.alert-top{
    padding: 0 !important;
    align-items: center !important;
}

don't know about the main issues with keyboard though ... but this solved my problem...

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#171