# iOS Native Keyboard hides the content

**URL:** <https://forum.ionicframework.com/t/ios-native-keyboard-hides-the-content/42395>\
**Category:** ionic-v1\
**Created:** [January 29, 2016, 9:11pm UTC](https://forum.ionicframework.com/t/ios-native-keyboard-hides-the-content/42395 "2016-01-29T21:11:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![marlburrow](https://avatars.discourse-cdn.com/v4/letter/m/c5a1d2/32.png) [@marlburrow](https://forum.ionicframework.com/u/marlburrow)\
**Post date:** [January 29, 2016, 9:11pm UTC](https://forum.ionicframework.com/t/ios-native-keyboard-hides-the-content/42395/1 "2016-01-29T21:11:35Z")

</div>

Hello,

I’ve a Keyboard issue with my chat application (only tested on iOS device)

As you can see on the screenshots below, the native iOS keyboard hides the chat content, but i would like that the keyboard pushs the content on top

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/d/6/d65c62d7af3df15f8b7cb290a06c58dca3843f42.png)

![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/e/ce949955cb8881c8c4699b1248fd05ed9bf91559.png)

I’ve searched a lot but I have not found anything about this issue.

Here is a light version of my chat view:

```
<ion-view hide-back-button="true" view-title="Chat with {{contact.display_name}}">
  <ion-nav-buttons side="left">
    <a ng-href="#/tab/chats" class="button button-icon button-clear ion-android-chat"></a>
  </ion-nav-buttons>
  <ion-content class="padding" keyboard-attach>
    <ol class="messages">
      <li ng-repeat="message in data.chat.messages track by $index">
        <!-- Item -->
      </li>
    </ol>
  </ion-content>
  <form ng-submit="sendMessage(input.message)" novalidate>
    <ion-footer-bar align-title="left" class="item-input-inset">
      <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input ng-model="input.message" type="search" placeholder="Your message here">
      </label>
      <button class="button button-clear" ng-disabled="!input.message || input.message === ''">
        Send
      </button>
    </ion-footer-bar>
  </form>
</ion-view>

```

Thank you

---

<div class="post-metadata">

**Author:** ![sdhull](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sdhull/32/95681_2.png) [@sdhull](https://forum.ionicframework.com/u/sdhull)\
**Post date:** [February 16, 2016, 8:26pm UTC](https://forum.ionicframework.com/t/ios-native-keyboard-hides-the-content/42395/2 "2016-02-16T20:26:42Z")

</div>

I’m also having this problem. I thought that maybe reverting to js-scrolling would fix it, however that didn’t do it for me either.

What I have found – if it’s any consolation – is that once you start typing, the input scrolls into view. It’s just confusing at first.

@tim is there any chance a future build might scroll the active input into view _before_ the first keystroke?

---

<div class="post-metadata">

**Author:** ![sdhull](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sdhull/32/95681_2.png) [@sdhull](https://forum.ionicframework.com/u/sdhull)\
**Post date:** [February 17, 2016, 10:56pm UTC](https://forum.ionicframework.com/t/ios-native-keyboard-hides-the-content/42395/3 "2016-02-17T22:56:30Z")

</div>

Working on debugging this today.

```
> ionic.version
"1.2.4-nightly-1917"

```

In Chrome (of course) this problem doesn’t occur at all.

I thought I had come up with a clever hack – attach a handler to focus of textareas that would add a character and remove it, in order to force whatever it is that’s showing the textarea to do its thing.

What I found was strange. In debugging, I decided to just set the field to “foo” so I could be sure it was doing something.

```
<textarea rows="6" ng-model="textArea.value" ng-focus="scrollHack($event)"></textarea>

$scope.scrollHack = function(event) {
  $timeout(function(){
    var originalVal = event.target.value;
    var newVal = originalVal + "foo";
    event.target.value = newVal;
  }, 100);
  //event.target.value = originalVal;
  return;
};

```

[Here’s a video of me playing with it](http://recordit.co/HpAcdZl8CO). Let me break down what happens in the video, as I understand it:

1. I click the textarea, it pauses in a debugger in my `scrollHack` method. At this point, the behavior is correct, in that it shows the input.
2. I click the “Continue” button in the debugger, and then 2 things happen:
3. the view adjusts and the input is hidden behind the keyboard ( **WHY!!!???** ) AND
4. js is paused in my debugger again. This is because I change the value of the textarea in this method (I verified by emptying the method and re-running this experiment). I presume it’s angular magic that prevents an infinite loop, but somehow an infinite loops is indeed prevented.
5. So I click “Continue” again and now we’re out of the debugger and the input is covered by the keyboard (though the value is “foo”, as that’s what it was set to by my `scrollHack` method). I type “Y” and now the input scrolls into view and you see “fooY” in the `textarea`.
6. I remove the breakpoint and click the `textarea` again so you can see this all in fast motion.

Back at square 1. So much for a hacky work-around.

---

<div class="post-metadata">

**Author:** ![shrhawk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/shrhawk/32/98801_2.png) [@shrhawk](https://forum.ionicframework.com/u/shrhawk)\
**Post date:** [March 30, 2016, 9:23pm UTC](https://forum.ionicframework.com/t/ios-native-keyboard-hides-the-content/42395/4 "2016-03-30T21:23:27Z")

</div>

@marlburrow, @sdhull facing the same issue is this fixed without hack ?

---

<div class="post-metadata">

**Author:** ![kov\_lxrumba](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/kov_lxrumba/32/105481_2.png) [@kov\_lxrumba](https://forum.ionicframework.com/u/kov_lxrumba)\
**Post date:** [December 20, 2016, 5:31am UTC](https://forum.ionicframework.com/t/ios-native-keyboard-hides-the-content/42395/5 "2016-12-20T05:31:24Z")

</div>

ughhhh !! I am facing the same issue. The textArea is hidden under keyboard, until a key is pressed. 😕 I wonder if somebody has a hackaround issued for that.

---

<div class="post-metadata">

**Author:** ![anicacute09](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anicacute09/32/113162_2.png) [@anicacute09](https://forum.ionicframework.com/u/anicacute09)\
**Post date:** [December 20, 2016, 5:37am UTC](https://forum.ionicframework.com/t/ios-native-keyboard-hides-the-content/42395/6 "2016-12-20T05:37:22Z")

</div>

if it is in android you need to go to androidmanifest and use adjustResize… another way around is:

```
window.addEventListener('native.keyboardshow', keyboardShowHandler);

        function keyboardShowHandler(e, scrollBottom, timeout, ionicScrollDelegate){
            $ionicScrollDelegate.resize();
        }

        window.addEventListener('native.keyboardhide', keyboardHideHandler);

        function keyboardHideHandler(e, scrollBottom, timeout, ionicScrollDelegate){
            $ionicScrollDelegate.resize();
        }
```