Selecting textbox puts huge white space at top of phone?


#1

Has anyone ever seen anything like this?

http://d.pr/i/iMio/5r8u5e0c

When I select the password textbox of my login form, this huge white area appears at the top of the screen. Nothing like this ever happens when testing in Chrome on my laptop.


#2

I’ve seen the opposite of that where after the keyboard hides, half the view is missing from the bottom. Never seen your issue though.

I know the Ionic Team is really close to a big update to keyboard issues. Hopefully that will help.

If you put together a sample of the code for that view, we can try to recreate it and get it added to the list of issues.


#3

Here is the entire view. Again never really has any problems in the desktop browser. But on the phone I get the huge white space. Any ideas for fixes would be greatly appreciated!

<ion-view title="">
  <ion-content has-header="false" padding="false" style="background-color: #ef4e3a; height: 100%">
        <div style="margin-top: 25px; font-size: 20px; line-height: 25px; text-align: center; color: white; background-color: #ef4e3a; padding: 10px;">
            <img src="/img/login.png" style="align: center;"><br>
            Get lots of support email? Let Snappy streamline your customer support.
        </div>
        <div>
            {{ loginError }}
        </div>
        <form ng-submit="attemptLogin()" style="margin-top: 85px;">
            <div class="list list-inset" style="background-color: #ef4e3a; padding: 10px;">
                <label class="item item-input">
                    <span class="input-label">Email</span>
                    <input type="email" ng-model="credentials.email" autocapitalize="off">
                </label>
                <label class="item item-input">
                    <span class="input-label">Password</span>
                    <input type="password" ng-model="credentials.password">
                </label>
                <button class="button button-positive button-block" type="submit" style="background-color: #8cc63e; border: 0;">Sign In</button>
            </div>
        </form>
    </ion-content>
</ion-view>