Content overlaps header after keyboard show in ios and ionic beta14

ionic-v1
1

When i click in one text input the keyboard show up, in the right way the content is moved upward for showing the input box just up the keyboard and prevent hiding but the content z-index seems wrong and it go up the nav bar.
When i close the keyboard the content goes under header bar

my code is this:

<ion-view view-title="{{'SIGN_UP' | translate}}" class="unisexColorBg">
  <ion-content class="padding" scroll="true">

    <div class="payoff tac">
      <h2>{{'WELCOME_TO_' | translate}} asd as as da sds</h2>
      <h3>{{'SIGN_UP_PAYOFF' | translate}}</h3>
    </div>


    <ion-list>
      <label class="item item-input">
        <input type="email" placeholder="Email" ng-model="userFormData.email" name="email" return-close="true" ng-change="validateForm()">

      </label>

      <label class="item item-input">
        <input type="password" placeholder="Password" ng-model="userFormData.password" name="password" return-close="true" ng-change="validateForm()">

      </label>
    </ion-list>


  </ion-content>

  <div class="placeBottom padding">
    <button class="button button-block button-light button-large" ng-disabled="!isFormValid" ng-click="signUp()" >
      {{'SIGN_UP' | translate}}
    </button>
    <div class="tac">
      {{'BY_SIGN_UP_PRIVACY_POLICY' | translate}}
      <a class="" href="#/privacyPolicy">Privacy Policy</a>
    </div>
  </div>

</ion-view>

image
IMG_5424.PNG640Ă—960 55 KB

@mhartington is this the best place where ask this stuff or open an issue on github?

3 Likes
2

This is the perfect place to ask this :smile:

So what you can do is add this to your run function.

cordova.plugins.Keyboard.disableScroll(true);

Now it doesn’t disable our scrolling, but it disables the native overflow scrolling for ios.
Also, does that nav-bar have any background color?

3

i have already
cordova.plugins.Keyboard.disableScroll(true);

yes nav-bar has background color, a customization via sass of bar-positive, bar-sable and bar-calm depending on certain app settings…

any suggestion for fix the bug? :slight_smile:

4

Hi @mhartington i haven’t found solutions for this bug, any idea?
Thank you

5

Well I ask about the background color because if the background is transparent, it would cause the issue you have.

Can you put together a simple plunkr or codepen?
I tried replicating this with the provided code but was able able to recreate the issue.

6

my code is this:
in the index.html

<ion-nav-bar class="bar-red" >
  <ion-nav-back-button class="button-clear">
    <img style="width:30px;padding-top:5px;" src ng-src="{{ENV.CDNURL}}assets/buttons/back_btn.png">
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

THE VIEW:

<ion-view cache-view="false" view-title="{{'SIGN_IN' | translate}}" class="unisexColorBg">
  <ion-content class="padding" scroll="true">
    <!-- User logged : {{LoggedUser.userSync.\$id}}
  -->
  <div class="payoff tac">
    <h3>{{'NICE_TO_SEE_YOU_AGAIN' | translate}}!</h3>
    <h4>{{'SIGN_IN_PAYOFF' | translate}}</h4>
  </div>
  <!-- <form name="loginForm" action="#" novalidate="novalidate"> -->

  <ion-list>
    <label class="item item-input">
      <input type="email" placeholder="Email" ng-model="signInUpForm.email" name="email" return-close="true" ng-change="validateForm()">
      <!-- ng-model-options="{ updateOn: 'blur'}" -->
      <!-- <div ng-if="loginForm.email.\$dirty" ng-messages="loginForm.email.\$error" ng-messages-include="/templates/partial/validation_error_messages.html"></div> -->
    </label>

    <label class="item item-input item-default">
      <input type="password" placeholder="Password" ng-model="signInUpForm.password" name="password" return-close="true" ng-change="validateForm()">
      <!-- <div ng-if="loginForm.password.\$dirty" ng-messages="loginForm.password.\$error" ng-messages-include="/templates/partial/validation_error_messages.html"></div> -->
    </label>
  </ion-list>


  <!--  Errori di firebase -->
  <!-- <div ng-if="signInErrorMessage" class="errorMessage">
    {{signInErrorMessage | translate}}
  </div> -->

  <!-- </form> -->
</ion-content>

<div class="placeBottom padding">

  <button class="button button-block button-light button-large" ng-disabled="!isFormValid" ng-click="signIn()" >
    {{'SIGN_IN' | translate}}
  </button>

  <div class="tac">
    {{'PASSWORD_LOST' | translate}}? <a ng-click="passwordRecovery()">{{'PASSWORD_RECOVERY' | translate}}</a>
  </div>

  <div class="tac">
    {{'BY_SIGN_UP_IN_YOU_AGREE' | translate}}<br/>
    <a href="#/privacyPolicy">{{'PRIVACY_POLICY' | translate}}</a> {{'AND' | translate}}
    <a href="#/termsAndConditions">{{'TERMS_AND_CONDITIONS' | translate}}</a>
  </div>
</div>
</ion-view>
7

I have been experiencing this problem too, any updates?

8

@mhartington I don’t tink is a problem of background color, if i scroll the view without keyboards the content goes under the nav bar, but if the keyboard is open the content move on the top of navbar…

9

I can confirm what @kurtommy describes with beta 13.
Disabling scroll does not work for me via the following recommended command:
cordova.plugins.Keyboard.disableScroll(true);

1 Like
10

I’m on beta 14, latest night build
"ionic": “driftyco/ionic-bower#1.0.0-beta.14-nightly-968”,

11

Again, please try to provide a codepen so I can test this.
I tried on my end and wasn’t able to reproduce the issue.

image
IMG_2966.PNG750Ă—1334 45.9 KB

12

I need to go out of the office but before leaving I noticed the following (I will try to provide the codepen once I return to the office):

In my case this happen in an modal. I noticed that when the keyboard is displayed a css inline style is applied to the ion-content to set the overflow property to visible. I have set it manually to hide using the safari inspector and the transparency goes away as expected.

I have traced the overflow: visible to the ionic modal scss, I’ve naively set it to “hidden” to see if that could impact without results.

Image without keyboard displayed and ion-content html line highlighted:

image
Screen Shot 2015-02-02 at 12.20.48.png1090Ă—597 252 KB

Image with keyboard displayed and overflow: visible ion-content:

image
Screen Shot 2015-02-02 at 12.21.09.png1089Ă—606 233 KB

Will work on preparing the codepen. Thanks!

13

Here is the light version of my code in codepen, hope it helps, the issue appears when opening modal on an ios browser and the keyboard is displayed.

See the Pen Ionic iOS Modal Issue with scrolled content when keyboard is displayed by Victor Mendoza (@VicM) on CodePen.

In the codepen the modal header bar does not get transparent as in my app but the content (form) can get actually out of the modal is it is scrolled up with the keyboard open. The issue is more noticeable when running on an iPad (screenshot below).

image

14

Ahh okay, this is in a modal.
So what you can do is try changing this.

While I search for the reason overflow is not set to hidden, this can be temporary fix.

15

Ok, I will try the temporal fix, thanks!

16

Hi @mhartington the problem is also in all the view!!!
today i found the bug inspecting the code change on open/close keyboard

the problem is here:

<ion-content id="addStepWrapper" class="padding scroll-content ionic-scroll  has-header has-footer has-tabs" style="height: 346px; overflow: visible;">

</ion-content>

when the keyboard is open ionic add

overflow: visible;

and the content go up the header bar

i added

#addStepWrapper{
  overflow:hidden !important;
}

to the view wrapper for solving the issue.

1 Like
17

I can confirm kurtommy solution works as well. Thanks to both!

1 Like
18

I also experience this issue on the latest master of Ionic. @kurtommy’s fix works for me (for now).

19

i still have this issue, works only if i disable jsScroll:

angular.module('app', [...])
.config(function($ionicConfigProvider){
    if(ionic.Platform.isAndroid())
        $ionicConfigProvider.scrolling.jsScrolling(false);
})
20

After upgrading to rc.3 I’m not seeing this issue anymore.