$ionicModal height not set automagically, getting weird whitespace and interactions with on-screen keyboard

ionic-v1
1

Hi all.

I have an app I’m building and am displaying a login modal - basically a logo, a username field, a password field, and a “Log In” button. Here’s what it looks like:

<ion-modal-view>
    <ion-header-bar class="bar-positive">
      <h1 class="title">Login</h1>
      <div class="buttons">
        <button class="button button-clear" ng-click="hideLoginDialog()">Cancel</button>
      </div>
    </ion-header-bar>
  <ion-content class="padding">
    <form ng-submit="attemptLogin()">
      <center>
        <img src="images/client_logo.gif" alt="Client Logo"/>
      </center>
      <div class="list list-inset">
        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ng-model="loginData.username" autofocus="autofocus">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ng-model="loginData.password">
        </label>
      </div>
      <div class="padding">
        <button class="button button-block button-positive" type="submit">Log in</button>
      </div>
    </form>
  </ion-content>
</ion-modal-view>

My ionic info output:

Your system information:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.3.1
Xcode version: Xcode 7.2.1 Build version 7C1002

I keep getting two issues I don’t know how to fix:

  1. Whitespace at the bottom of the dialog when it’s shown on-screen. I can’t force the height in CSS to fix this because the height will vary depending on how the actual form is rendered (device size, orientation, etc). This happens on all platforms.
  2. Weird interactions with the on-screen keyboard under Android (5.0.2, running Samsung TouchWiz UI). For example, If I tap on the username field, the bottom half of the modal (including my password field) is cut off as if it’s been overlaid with a white panel. I have to tap on the modal outside of any inputs to get the on-screen keyboard to hide before I can tap on the password field, and then other weird stuff can happen, including where both inputs disappear and I’m only left with the logo - it seems like stuff is scrolling off the top of the dialog. Seems to misbehave with or without the ionic keyboard plugin.

This happens consistently on iOS and Android devices (both real and emulated, but not in desktop Chrome. Can anyone please help because it’s driving me nuts. Thanks.

2

Hey, having the EXACT same issue here. Did you ever find a workaround or the root of the problem?

I found this discussion here in the forum where it’s suggested to remove the ion-content tag.

That helps a little bit, but still getting weird height behavior and whitespace.