How to prevent Ionic view from bouncing back down when scrolling up to reveal password input?

Question

I'm using the Ionic framework to build a mobile iOS app. My login view looks like this:

The 2nd input, the password input is halfway hidden by the keyboard, but when I scroll up to reveal the 2nd input and let go, the view bounces back down to it's original state, still obscuring the 2nd input.

Here is the in-between state (me holding down and scrolling up)

I can click to select the 2nd input, but the experience isn't user friendly.

I would like to either:

Allow the user to scroll up and keep the scrolled position without a bounce back so they can select the 2nd input
Or once the 1st input is selected, move the view up so that the keyboard is below the 2nd input, thus making it easy to access.

Below is the markup for my login.html template

<ion-view view-title="Login" ng-controller="LoginCtrl as login">
    <ion-content>
        <div class="splash">
            <div class="x-splash" ng-click="login.xSplash()"></div>

            <header>
                <h1><div class="logo"></div></h1>
                <h2>All change is detectable.</h2>
            </header>

            <div class="divider"><hr></div>

            <section class="login-form">
                <form name="loginForm" ng-submit="login.login(credentials)" novalidate>

                    <div class="login-alert" ng-class="{ hideLoginMsg: login.hideMessage == true }">{{ login.message }}</div>

                    <input type="text"
                           id="username"
                           placeholder="Username"
                           name="username"
                           ng-model="credentials.username">

                    <input type="password"
                           id="password"
                           placeholder="Password"
                           name="password"
                           ng-model="credentials.password">

                    <button type="submit" class="btn-green">Login &raquo;</button>
                </form>

            </section>

            <p class="small-p">
                <a href="#">Forgot your password?</a>
            </p>
        </div>
    </ion-content>
</ion-view>

When I inspect in Chrome, this is what the ion-nav-view markup looks like:

<ion-nav-view class="view-container" nav-view-transition="ios" nav-view-direction="back"><ion-view view-title="Login" ng-controller="LoginCtrl as login" class="pane" nav-view="active" style="opacity: 1; transform: translate3d(0%, 0px, 0px);">
<ion-content class="scroll-content ionic-scroll"><div class="scroll" style="transform: translate3d(0px, -32.5px, 0px) scale(1);">
    <div class="splash">
        <div class="x-splash" ng-click="login.xSplash()"></div>

And the .view-container class:

.view-container {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

score 0 · Accepted Answer · answered Nov 04 '15 at 21:36

Ok this is how I solved it.

I didn't find a default solution so I had to use ng-focus and ng-class to change the styling so that the 2nd input would be reachable by the user easily.

<input type="text"
       id="username"
       placeholder="Username"
       name="username"
       ng-focus="login.loginFocused()"
       ng-model="credentials.username">

In the Controller

function loginFocused() {
    vm.inputFocused = true;
}

CSS

.splash-up {
    position: absolute !important;
    top: -40px !important;
}

Markup

<ion-view view-title="Login" ng-controller="LoginCtrl as login" has-bouncing="false">
    <ion-content>
        <div class="splash"
             ng-click="login.splashClick()"
             ng-class="{ 'splash-up'      : login.inputFocused,
                         'splash-default' : login.inputFocused == false }">

How to prevent Ionic view from bouncing back down when scrolling up to reveal password input?

1 Answers1