Header bar moves up behind statusbar or even completely out of the viewport when form field is focussed

[rvanbaalen]

Well.. that about sums it up ^

Screenshot (Ionic beta 1, iPhone 4):

[rvanbaalen]

Duplicate of #818

[ajoslin]

Thanks. We're working on these keyboard bugs for beta2.

[rvanbaalen]

Do you have any lead on what might cause this?
By the time you plan to release beta2, my app is already out in the wild ;-)

[calendee]

Here is a working demonstration of this problem:

I just tested this via the "Getting Started" process using "Ionic, v1.0.0-beta.1".

My Steps:

• npm install -g cordova ionic
• ionic start statusBarTest sidemenu
• ionic platform add ios

I then edited app.js to start with a simple form. :

<ion-view title="Form Test">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">

    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="First Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Middle Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Last Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 1">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 2">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="City">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="State">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Zip Code">
      </label>
    </div>

  </ion-content>
</ion-view>

Then:

• ionic build ios
• ionic emulate ios

Here is the result:

As you can see, the keyboard pushes the form up into the status bar.

[tlancina]

Hey Justin, I believe the issue is that has position: fixed. Try
changing the body css to position:static. Sorry I haven't pushed the fix
yet, we're still testing out the keyboard stuff across devices right now.

Give that a shot and let me know if it helps.

On Wed, Apr 2, 2014 at 4:34 PM, Justin Noel [email protected]:

Here is a working demonstration of this problem:

I just tested this via the "Getting Started" process using "Ionic,
v1.0.0-beta.1".

My Steps:

• npm install -g cordova ionic
• ionic start statusBarTest sidemenu
• ionic platform add ios

I then edited app.js to start with a simple form. :

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Middle Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 1">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 2">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="City">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="State">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Zip Code">
  </label>
</div>

Then:

• ionic build ios
• ionic emulate ios

Here is the result:

[image: status bar problem]https://cloud.githubusercontent.com/assets/57374/2597008/fb174690-baad-11e3-80aa-c88985210bcb.gif

As you can see, the keyboard pushes the form up into the status bar.

Reply to this email directly or view it on GitHubhttps://github.com//issues/932#issuecomment-39386769
.

[calendee]

Unfortunately, that didn't help. In the sample project, I added this to the "style.css":

body, .ionic-body {
    position: static;
}

That didn't work even though "style.css" is included after the Ionic CSS file. I also confirmed in Safari debug that the position: static had been applied to the body.

So, I then tried just body with no luck.

body {
    position: static;
}

Next, I just updated the "ionic.css" file. This still did not work.

I also thought you might have meant to make the header static; so I gave it a try. No luck with that either.

[tlancina]

Ah didn't see it is iOS 7.1 only. I don't have access to a Mac right now so I'll take a look first thing tomorrow. Thanks for your help looking into this.

[rvanbaalen]

Thanks for the working demo Justin 👍

[ashconnell]

Depending on your setup, setting .body to position:static wont fix anything, as .pane and .view also have position absolute.

In custom mobile web apps i have built, the header needs to be outside of any of these heavily position elements and the header itself set to position:fixed to stay there when the keyboard is up. Android has an option called adjust-resize which squishes the view to fit above the keyboard. iOS on the other hand, just pans the view to center the input on the screen.

Cordova also has an preference called "KeyboardShrinksView" which is defaulted to false. I havent looked at this yet but it looks like a solution for iOS to what Android already does with adjust-resize

Creating a harmony between both of these differences is one HELL of a job

[ajoslin]

We're actively working on keyboard fixes now to stop all of these problems.

[CoenWarmer]

This bug is unfortunately not fixed in nightly 1717.

[adamdbradley]

One thing that @tlancina noticed is that with the latest tap fixes, if you click the input directly it does not move the header up. So I think we solved part of this issue. However, if you tap the label that wraps an input, then 300ms later it will do the ugly native scroll. The way the default Ionic css works it's hard to tell the difference between the wrapping label and the actual input, so this might be part of the reason it doesn't always work. I've been using this test page to help debug these issues on each device.

Right now I think the reason is because we're not preventing the default on a label click. If we do e.preventDefault() on a label wrapping an input then the keyboard will not automatically popup on the first tap. I'll looking into this more, thanks.

[whitneyland]

@adamdbradley volunteering as another tester for this fix when it gets into the nightlies. thx.

[CoenWarmer]

Unfortunately this issue is not yet resolved in 1.0.0 beta2.

[adamdbradley]

@CoenWarmer We're aware of the issues and still working on it. Also, keep in mind that when reporting any keyboard issues please provide the platform, platform version, and is the issue in the mobile browser, emulator, or in cordova, and if it's cordova, is it full screen or not. Other useful information includes the element you tapped, such as the label or the input, did you have to manually scroll at any time to get to an input, does the meta viewport have height=device-height or not, and if the element is below where the virtual keyboard would eventually show, is it half showing where the keyboard would show, or is it above and no need to scroll. Thanks

[CoenWarmer]

Encountered on:

• iOS7.1.1
• Ionic 1.0.0 beta 2
• in Cordova
• in simulator and device
• not full screen
• no label used, only input
• the view can be scrolled after the input field gets focus, if the input field has no focus the view can not be scrolled
• the view doesn't scroll immediately after it gets focus and the keyboard pops up. When the input field gets focus you can then place your finger on the input field and drag up to move the view out of the webview.

Also happens on Android 4.4 and 4.3, also using 1.0.0 beta2. Exact same circumstances as iOS7.1. So when input field gets focus and keyboard pops up, nothing is wrong, it is when the input gets focus and you then place your finger on the input field and start dragging it up or down that's when you can move all content out of the view. Will make a screencast later.

[CoenWarmer]

Screencast: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

[zelphir]

After beta2 I have this problem on small screens (like iphone3 or iphone4).

iphone 5 (ok)

iphone 4 (problems)

[adamdbradley]

@zelphir Can you please provide a codepen that replicates this issue? Are they both iOS 7.0, or 7.1?

[tlancina]

@CoenWarmer is your input in a content area by chance? The only way I am able to replicate your issue is by having an input that isn't in a scroll view.

Just to clarify - this is expected behavior if you aren't using a scroll view. If there are inputs below the keyboard, and you are unable to scroll to them using JS, then the browser is forced to shift the content up for them to be visible, which is why you are able to move everything upwards.

[CoenWarmer]

@tlancina My input is not within a content area.

This is the code I'm using:

<ion-view title="Delegates">
  <div class="search-container">
    <div class="search-inner">
      <input ng-model="searchText" placeholder="Search" ng-enter="ScrollTop()">
    </div>
  </div>

  <ion-tabs class="tabs-icon-only tabs-double">
    <ion-tab title="A-Z">
      <ion-content class="slide-under-header has-header has-tabs has-double-tabs" padding="false" delegate-handle="DelegateScroll">
        <!-- stuff -->
      </ion-content>
    </ion-tab>
    <!-- another ion-tab -->
  <ion-tabs>
</ion-view>

I'm not sure I entirely follow what you're saying about this being the expected behavior. Right now it looks like the app is breaking when everything scrolls under the header. Should I instead place the input field within an ion-content?

[tlancina]

Well suppose you have a list of several inputs, reaching to the bottom of your page. If they are not within an area that can be scrolled to using Javascript, how can they be brought into view when the keyboard comes up? The only way is to use the native browser scrolling, which works by shifting the content - all of it, including the header.

When an input or focusable area is within an ionic scroll view, we prevent the default scrolling and use Javascript to bring it into view, leaving the header in place.

I am not an ui-router expert unfortunately, but try placing the ion-content around all of the content on the page and see if that helps.

[CoenWarmer]

I understand now- but doesn't that lead to the undesirable visual effect of the whole nav-bar disappearing including the back button?

More to the point in my use case, if I put the input field within a ion-content, how can I make sure they stay fixed at the top underneath the header bar in a way that transition animations work correctly on iOS and Android?

[LightZam]

@ravivit9 @mikehaas763 @ashleyrudland
you should try

iOS Notes
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.

from keyboard ios note

it will works like a charm.

[michaelknoch]

can i set cordova.plugins.Keyboard.disableScroll(true) and still expect the view to scroll to my input?
If i disable scroll, the statusbar isn't pushed out anymore, but the keyboard overlaps my input field.

[tlancina]

@michaelknoch as long as your input is within a scroll view (like ion-content) it should automatically scroll into view, unless you have called ionic.keyboard.disable().

[LightZam]

@michaelknoch i think you are asking keyboard-attach

[michaelknoch]

@LightZam but it only supports ion-footer bar and my input is in inside my content in ion-view

@tlancina should i wrap my content with ionScroll? http://ionicframework.com/docs/api/directive/ionScroll/

[tlancina]

@michaelknoch you shouldn't need to, as ion-content has a scroll view already. If you can create a simple codepen that reproduces the issue, along with what phone and OS you're using, as well as the output from the ionic info command (if you're using the CLI) I'll take a look.

[ituhin]

@tlancina I am facing this issue on
Cordova CLI: 5.2.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: 1.7.0
ios-sim version: 4.1.1
OS: Mac OS X Yosemite
Node Version: v0.12.7
Xcode version: Xcode 7.0 Build version 7A176x
phone - iphone 4S, ios 7.0.6

if i keep "cordova.plugins.Keyboard.disableScroll(true)" header dont push out, but keyboard comes on top of my textarea. and i kept the textarea (using with msd-elastic) inside , to get a similar style like whatsapp, so its outside ion-content

and if i use keyboard-attach then it screws up with msd-elastic :(
any suggestions ?

tried with ionic.Platform.fullScreen()
but no luck... also this fullScreen() creates another issue in ios...
it reduces the hight of the header... as this css dont get applied when you call fullscreen()
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {height: 64px; }

evrything was fine in andorid.

[wang3g]

I am having the almost same issue after upgrading Cordova to 6.0.0, namely, statusbar appears and overlapps the Header bar when form field is focussed. This problems exists on my android device. I have not tried iOS device yet. Can anyone pls help?

Cordova CLI: 6.0.0
Gulp version: CLI version 3.8.11
Gulp local: Local version 3.8.11
Ionic Version: 1.0.0-rc.5
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: 1.8.3
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v0.12.2
Xcode version: Xcode 7.2 Build version 7C68

[freakyfriday]

I was having this problem on Android after upgrading to Cordova 6.0.0 and solved it by calling the AndroidFullScreen.immersiveMode method of the plugin https://github.com/mesmotronic/cordova-plugin-fullscreen

// Hide system UI and keep it hidden (Android 4.4+ only)
AndroidFullScreen.immersiveMode(successFunction, errorFunction);

[17holeinone]

This problem is still happening, solving it by going full screen is not an appropriate solution since the app shouldn't really run on full screen, but just for the test I tried it, and while the app does go into fullscreen mode, it is still "larger" that the screen, therefore you can scroll it a little bit with the header going under the status bar ...
Please help!

[EricDeCoff]

Having this issue to? Is there a work around?

[philliphartin]

Also having the same issue with iOS in Ionic 2

Environment
Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.7.1
Xcode version: Xcode 7.2.1 Build version 7C1002

As you can see there is not any room/padding between the status bar and the header in the Ionic app.

[rafaellop]

New/old issue with the keyboard is here again. While I can disable scrolling when input is focused by taping, the old issue with the header scrolling out of view is again present if focusing form fields with the virtual keyboard special button. On Android keyboard there's a green button at the bottom right that allows to switch to the next input in the form. Even if I've got scrolling turned off the button scrolls the view to make focused inputs visible and as the result the header is out of the screen.

To test this out the first input must be in the view and focused with keyboard visible and the second input must be below the fold (somewhere under the keyboard). Now tapping the green button (as in the picture) results in scrolling the view and the header goes off screen.

Cordova 6.3.0
ionic-plugin-keyboard 2.2.1
Tested on device with Android 5
Build for Android 24.0.1

Do you have any ideas to turn off this button or fix the issue? I'm not 100% sure, but I suspect that this started after cordova upgrade to some 6+ version.

[alessandrogriggio]

@rafaellop Did you solve this issue?

[hishammalik]

having this issue appear when file upload from Phone/Camera screen opens on iOS.

[cory-buckley]

I'm having this issue with the email composer

Edit For those who are still having this issue even after trying everything, try reverting back to [email protected]. It seems as though 4.3 may have introduced some strange behavior. Even the most recent cordova-ios nightlies didn't seem to fix my problem but reverting fixed it right up.

[tikiwade]

This issue is still happening for me as well, this is not resolved.

[dutchview-shreesha]

In IOS,if we tap on statusbar whole ion-content will blinks in IONIC2.How to resolve this issue.Please suggest..
Thank You.

[newmediajosh]

Reverting back to [email protected] didn't help me, sad to say. Same problem after using native camera file library.

Just realized from another post I was able to downgrade the cordova-statusbar plug in from 2.2.1 to 2.2.0 and it fixed the problem. Seems like it was the statusbar plugin causing the problem in my case.

[DaleMatthews]

I had this issue with

• ionic 3.9.2
• cordova-ios 4.4.0
• iOS 10.3
• An assortment of iPhone devices and emulators

I had a textarea with height: 100%; (which was all of ion-content) and the ion-header would zoom out of view whenever the textarea was focused. My fix was to change it to height: auto; min-height: 25%; and put the textarea inside a div with height: 100%; margin: 0; padding: 0; and (click)=focusTextArea(). Kinda janky and I'd love a better solution but this works ok for now 👍

[sohandhaindwal]

Please use this plugin ionic cordova plugin add cordova-plugin-ionic-webview --save. Its solved my problem thanks

[jvhe123]

I experienced the same problem in combination with the email-composer plugin.

I solved the issue by upgrading the cordova-plugin-statusbar from version 2.2.1 to 2.3.0.

[glenr4]

@jvhe123 I just tried doing that but it looks like v2.3.0 does not exist, do you mean v2.2.3?

[jvhe123]

@glenr4

[cjbrunnen]

• cordova-plugin-keyboard 1.2.0
• ionic-plugin-keyboard 2.2.1

I was having this issue for the iPhone X. Opening the keyboard pushed the header up and almost off the page.

I fixed it by putting an eventListener in my javaScript file for the page affected:

document.addEventListener('deviceready', function(e){ window.addEventListener('native.keyboardshow', function () { cordova.plugins.Keyboard.disableScroll(true); }); });

This worked for me, hopefully it can work for one of you too.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.