iOS 7 header pushed up on input focus

ionic-v1
1

I have been trying various workarounds and nothing seems to work. I do have the ionic keyboard plugin installed.

If I disable the native scrolling, then some of my inputs become hidden behind the keyboard. I am fine with the scrolling, I just want the header to stay in place. All of my content is inside of an ion-content. Will take any help I can get on this one. I have also tried adding has-header class to the ion-content, but it didn’t seem to do anything.

Header code:

<ion-nav-bar ng-if="showHeader" class="bar-calm">

The ng-if is being satisfied, since it is showing up on the screen before I click the input.

Here is what it looks like:

2

Hey there!

So cordova.plugins.Keyboard.disableScroll(true); doesn’t disable all your scrolling, just the native overflow-scroll.

You still have the ability to scroll within ion-content since it’s a js-based scroller.

3

In the scenario of a pop up with inputs, I would be unable to scroll to see the buttons. How would I need to handle that scenario?

4

Hmm, that we would need to add to our scirpts to allow.

What you could do instead of a popup, would be to use a modal, since it can follow to same principles of a normal content area

5

I’ll give that a try.
If the content is not long enough to normally require scrolling, unless the keyboard is up, will scrolling still be allowed with disableScroll set??

6

Yup, as per our docs, you will still be able to scroll in our js-scroller.

If the content of your app (including the header) is being pushed up and out of view on input focus, try setting cordova.plugins.Keyboard.disableScroll(true). This does not disable scrolling in the Ionic scroll view, rather it disables the native overflow scrolling that happens automatically as a result of focusing on inputs below the keyboard.

7

Thanks. I’ll give it a try.

8

Is there an easy way to have it scroll the ion-content of focus of the input? I see that I can still scroll but it may not be that intuitive for our users. It looks like I can call in to the ionicScrollDelegate, but I would need to calculate the y-cooridnates for each input, which seems a little excessive.

9

It should scroll to the input automatically, is it not?

10

I have 5 total inputs. The first three are just text. Fourth is a date and fifth is a select. The overflow scroll used to kick in when focusing on either the date or select. When I disabled scroll, they stay hidden behind the keyboard. No scrolling takes place, but I am able to scroll.
They are all wrapped in label tags, if that makes a difference.

11

We are trying to submit to apple this week and this is one of my issues that I can’t seem to get wrapped up. Here is a summary of what I have tried and where I am at:

  1. For pop ups with inputs, I am just going to leave it as is with the header being pushed up. The user could take advantage of the extra screen real estate that this provides.

  2. For our registration form, I need to get a solution figured out. When disableScroll is not set, the header is pushed out of view. When disableScroll is set, the header stays in place, but the content is not scrolled to the focused input, leaving some of the inputs under the keyboard. The content is able to be scrolled manually, but this is not user intuitive. The registration form is completely inside of an ion-content.

Full template:

<ion-view>
<ion-nav-buttons side="left">
    <button class="button button-icon icon ion-arrow-left-c" ng-click="goBack()">
    </button>
</ion-nav-buttons>
<ion-content class="has-header">
    <form name="form" novalidate>
        <div class="list list-inset">
            <label class="item item-input item-icon-right item-floating-label">
                <i ng-if="form.email.$valid" class="icon ion-ios7-checkmark-empty valid-check"></i>
                <i ng-if="!form.email.$valid" class="icon ion-ios7-close-empty invalid-check"></i>
                <span class="input-label">E-mail</span>
                <input type="email" name="email" ng-model="user.email" placeholder="E-mail" required>
            </label>
            <label class="item item-input item-icon-right item-floating-label">
                <i ng-if="form.password.$valid" class="icon ion-ios7-checkmark-empty valid-check"></i>
                <i ng-if="!form.password.$valid" class="icon ion-ios7-close-empty invalid-check"></i>
                <span class="input-label">Password</span>
                <input type="password" name="password" ng-model="user.password" placeholder="Password" required>
            </label>
            <label class="item item-input item-icon-right item-floating-label">
                <i ng-if="form.confirm.$valid && user.confirmPass == user.password" class="icon ion-ios7-checkmark-empty valid-check"></i>
                <i ng-if="!form.confirm.$valid || user.confirmPass != user.password" class="icon ion-ios7-close-empty invalid-check"></i>
                <span class="input-label">Confirm</span>
                <input type="password" name="confirm" ng-model="user.confirmPass" placeholder="Confirm Password" required>
            </label>
            <label class="item item-input item-icon-right">
                <i ng-if="form.birthday.$valid && isValidBirthday(user.birthday)" class="icon ion-ios7-checkmark-empty valid-check"></i>
                <i ng-if="!form.birthday.$valid || !isValidBirthday(user.birthday)" class="icon ion-ios7-close-empty invalid-check"></i>
                <span class="input-label large">Birthday</span>
                <input id="date" type="date" name="birthday" ng-model="user.birthday" required>
            </label>
            <label class="gender item item-input item-select">
                <div class="input-label large">
                    Gender
                </div>
                <select ng-model="user.sex">
                    <option value=""></option>
                    <option value="M">Male</option>
                    <option value="F">Female</option>
                </select>
            </label>
        </div>
    </form>
    <div class="padding">
        <button class="button button-block button-positive" ng-disabled="!form.$valid || user.confirmPass != user.password || !isValidBirthday(user.birthday)"
                ng-click="register(user)">
            Register
        </button>
    </div>
</ion-content>
</ion-view>

Any help would be greatly appreciated.

12

Hey, yeah I will take a look at this and try to figure out the issue.

One thing, what version of ionic are you using?

13

We are using Beta 10.

14

Hmm, can you test out beta 11 or the nightly builds? This way we can rule out anything on ionics end

15

I can try this out with 11 tonight. I had to “dirty patch” Beta 10 to get around two issues that I was having, so I will have to re-apply those. Those bugs are:


16

Reproduced in Beta 11.

17

Hmm, odd, with the regular text inputs, it works fine.

But for the other inputs, it’s not scrolling.

I’m going to open an issue for this, as this shouldn’t be the case.
Thanks for staying with me and pointing this out

Edit:

Issue opened.

18

Thanks for taking a look. I’ll keep an eye on the github issue.