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

Duplicate of #818

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

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 ;-)

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.

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/driftyco/ionic/issues/932#issuecomment-39386769
.

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.

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.

Thanks for the working demo Justin :+1:

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

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

This bug is unfortunately not fixed in nightly 1717.

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.

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

Unfortunately this issue is not yet resolved in 1.0.0 beta2.

@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

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.

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

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

iphone 5 (ok)

iphone 4 (problems)

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

@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.

@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?

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.

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?

Yeah the situation of juggling tabs and maintaining a scrollable area for an input seems pretty tricky, and one that is bound to happen fairly often. @adamdbradley and I are looking into it right now.

Not sure I understand the issue with transitions, if you do something like

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

does it mess up the animations? It's quite possible having multiple content areas will mess other things up, as the assumption is probably that there is only one.

@tlancina Ah great, I didn't consider using two ion-content elements in one partial. Will see how that works out and report back.

The issue with transition animations that I was referring to occurs on certain Android versions. If you use position: static on an element and you transition away from that view, on Android 4.1 to 4.3 (I believe, not 100% sure, will check) those elements will remain locked once the animation begins. So all elements (ion-content, tabs, header bars, etc) will start moving to the left, but the element that you've given position: static will remain in the same place until the animation completes. This doesn't happen on iOS. This is why I was hesitant to use position static anywhere.

@tlancina Just tried putting the input element in one ion-content, and having the rest of the content in another, second ion-content. Unfortunately any input entered in the input element will now no longer filter the ng-repeat that's in the other ion-content. Other suggestions?

@CoenWarmer that's because the ion-content creates a child scope.

Try putting a controller over both contents. If the controller is, then don't just use a primitive for the input.

You're suffering 'the dot' problem of scope inheritance - a primitive in a different child scope is being set on the child scope, not on the parent scope. Do you know what I mean? If you don't, lemme know and I'll find a link / explain it.

Not familiar with it, unfortunately no. Care to share? :)

https://www.youtube.com/watch?v=DTx23w4z6Kc

Ah, yup, that makes sense! Gonna give it another go :+1:

hey @adam. How about a footer with an input? Since that's outside the scroll area, it's going to cause the problem too. Any way around that?

I also have this problem on iPad (7.1). I saw that ionic adds height=device-height to the viewport after recent changes if it's not set.
Because of this property the viewport gets about 200px (height) to large and is completely scrollable.
When i remove it it works.
I can fix this if somehow if i set .view and .pane to position: fixed and body to position: static, but the main viewport is still to large and shows a scrollbar on the right side if i move the finger up and down.

By the way ... this is independent from input focus. The input focus only moves the scroll position so you can see the result.

Hey guys, what's the current progress here?
I created a custom ionic file and removed the addition 'height=device-height' from it.
After this change everything works fine. No CSS fixes needed anymore and focus on input field tap is working correctly.
I'm also using the Keyboard plugin on iOS and do the following:

Keyboard.shrinkView(true);
Keyboard.hideFormAccessoryBar(true);

Placing the input in a separate ion-content also doesn't stop the behavior of making the entire view including the header bar scrollable underneath the webview when the input gets focus. Same behavior occurs as in my previous screencast: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

@D3CK3R we're working on getting all the different viewport scenarios straightened out :)

@CoenWarmer would you mind giving the Ionic Keyboard Plugin a run? We just made it public and I'm curious to see how it will work on inputs outside of a scroll view.

You can install it by running cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git from inside your Cordova project.

@tlancina That works! After I added the plugin the content is no longer draggable under the viewport when the input has focus. Awesome!!

Is the plugin ready for production? I'd love to deploy this as soon as possible since this project has just been published to the store.

@CoenWarmer you have no idea how happy I was to see your last comment! Great work @tlancina!

@adamdbradley @tlancina

Yeah!!!

@CoenWarmer yes for iOS it's production ready. We have an earlier version of it in an app that just got accepted into the app store, and I don't think the scroll stuff we added is any cause for rejection. Really glad it's working for you!

Good to close? @tlancina

This was still an issue in the beta14 release. After some extensive debugging I finally found the fix.

In my case, it was related to my meta viewport.

Original value (causing the header to show behind the statusbar)

<meta name="viewport" content="width=device-width">

New value (fixing this issue)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

I've started my project waaaay back before beta1 so this was probably some legacy html I never noticed.

Hope this helps someone.

@rvanbaalen I have exact meta viewport in my index file but in my case when I focus input text element the body sits on top of the status bar resulting in hiding the status bar. The status bar remains hidden after that even after keyboard slide down.

This is still an issue for me. I do have the keyboard plugin added. I'm trying to use a simple textarea as a "notepad" so that it will fill the entire screen as you can see with my height: 100% styles. In order to get those styles to work I had to disable scroll with the scroll="false" because the height style will only expand to the height of the parent. There is probably a better way to make this "notepad" to avoid this issue and I'd appreciate any suggestions.

I've added a background color to the textarea to make the screenshots below more obvious.

I'm using this view:

<ion-modal-view>
    <ion-header-bar class="bar-royal">
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.closeAddNote()">Cancel</button>
        </div>
        <h1 class="title">Add Note</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.saveNote(vm.noteContent)">Done</button>
        </div>
    </ion-header-bar>
    <ion-header-bar align-title="left" class="bar-subheader bar-stable">
        <h3 class="title">adding note for `client name`</h3>
    </ion-header-bar>
    <ion-content class="has-subheader" scroll="false">
        <div class="list padding" style="height: 100%;">
            <textarea placeholder="Comments" style="height: 100%; width: 100%;" ng-model="vm.noteContent"></textarea>
        </div>
    </ion-content>
</ion-modal-view>

Initial view

After clicking the text area

Demonstrating that I can scroll while the text area has focus.

Still an issue guys, please help @ajoslin @adamdbradley

iOS Simulator - iPhone 6 / iOS 8.3
ionic version 1.0.0-rc.0
plugins installed:

• com.ionic.keyboard
• com.phonegap.plugins.PushPlugins
• org.apache.cordova.console
• org.apache.cordova.device
• org.apache.cordova.file
• org.apache.cordova.geolocation
• org.apache.cordova.media

HTML from modal:

<ion-modal-view>
  <ion-header-bar>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="closeModal()">Cancel</ion-button>
    </div>
    <h1 class="title">Modal View</h1>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="create()">Create</ion-button>
    </div>
  </ion-header-bar>
  <ion-content>    
    <form>
...
</form>
</ion-content>
</ion-modal-view>

@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.

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.

@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().

@michaelknoch i think you are asking keyboard-attach

@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/

@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.

@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.

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

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);

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!

Having this issue to? Is there a work around?

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.

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.

@rafaellop Did you solve this issue?

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

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.

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

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

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.

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 :+1:

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

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.

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

@glenr4

• 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.

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.