ion-content won't resize when keyboard appears

Question

I have an application with a chat functionality which works great, except for one part, when the keyboard appears, the ion-content won't resize to a proper height, so I am stuck when I want to scroll to the top and the header disappears completely. The view has a header, content and footer and what I want is the footer to appear above the keyboard and the content to resize so it fits between the header and the footer-bar. The view I have created is as followed:

<ion-view id="userMessagesView" cache-view="true" flow-init flow-name="imageTemp.imageTemp" ng-if="!inChatSettings">
  <div class="loader-center" ng-if="!doneLoading">
    <div class="loader">
      <i class="icon ion-loading-c"></i>
    </div>
  </div>
  <div class="loader-center" ng-if="errorLoading">
    <div class="loader">{{'error_loading_messages'|translate}}</div>
  </div>
  <ion-content class="has-header has-footer" has-bouncing="true" delegate-handle="userMessageScroll" style="background:red;">
    <ion-refresher pulling-text="{{'pull_load_earlier'|translate}}" on-refresh="loadMore()"></ion-refresher>
    <div ng-repeat="message in messageThread.messages | orderBy : 'postDate'" class="message-wrapper">
      <div class="chat-bubble" ng-class="{ false: 'left', true:'right'}[{{message.postedBy|isCurrentUser}}]">
        <div class="message-detail">
          <span class="bold">{{message.postedBy.name}}</span>
        </div>
        <div class="message" ng-bind-html="message.message | nl2br" autolinker></div>
        <img ng-src="{{message.imageUrl}}" ng-if="message.imageUrl"/>
        <small am-time-ago="message.postDate">{{message.postDate|timeago}}</small>
      </div>
      <div class="cf"></div>
    </div>
  </ion-content>
  <ion-footer-bar class="bar-light message-footer">
    <button class="button button-icon icon icon-upload" flow-btn flow-file-added="imageUploaded($file)" flow-name="imageTemp.imageUrlTemp"></button>
    <label class="item-input-wrapper" for="newmessage">
      <textarea focus-me="input.focusInput" id="newmessage" ng-model="input.message" value="" required minlength="1" maxlength="1500" msd-elastic></textarea>
    </label>
    <button class="button button-clear" type="submit" ng-disabled="!input.message || input.message === ''" ng-click="sendMessage()" translate="send"></button>
  </ion-footer-bar>
</ion-view>

I tried adding the keyboard-attach attribute to the ion-footer-bar, but the footer only gets bigger when I add this. Plus the footer already stays on top of the keyboard, so it appears unneeded. I have the following situation, it also appears that when I type something, the view goes up a little more.

This is when the keyboard is shown:

This is when the keyboard is hidden:

Does any of you know how to resize the ion-content to a normal height when the keyboard appears?

See this http://stackoverflow.com/questions/31179470/how-to-resize-web-view-when-keyboard-appears-on-ios-cordova — Hisham, Jan 14 '16 at 10:00
Thanks, but this doesn't solve my issue. I added the preference to the config as I already installed the plugin, but with no change. There is a difference between his and mine situation. In his situation the keyboard lands on top of the complete view (including the footer) and in mine the view is moved up so the header and half the content falls of the screen. — Sietse, Jan 14 '16 at 10:31
@Sietse - I am facing similar issue with ionic2 chat application. Did you get any solution? — hardikdevios, Nov 15 '16 at 09:26
@hardik.shah I did found a solution, but I don't think it is a good solution. I'll write an answer with things I did, because at this time, I don't know exactly what solved it. — Sietse, Nov 15 '16 at 09:42
Solution is available on https://stackoverflow.com/questions/30898538/ionic-framework-keyboard-hides-input-field/46824656#46824656 — Atif Hussain, Oct 19 '17 at 07:30

score 0 · Answer 1 · answered Nov 15 '16 at 09:51

I have tried some things and the problem seemed to disappear, yet I don't think the solution is the right one or if this is actually the thing what solved the issue. So if anyone got a better solution, please share. First thing I had to do was including the Ionic keyboard plugin to get events based on the keyboard.

Inside the CSS, I have added:

.message-footer { min-height: 44px; }

Inside my controller I added the following code:

$scope.$on('taResize', function (e, ta) {
    if(!ta || !footerBar) return;

    var taHeight = ta[0].offsetHeight + 10;
    var newHeight = (taHeight < 44) ? 44 : taHeight;

    scroller.style.bottom = newHeight + 'px';
    footerBar.style.height = newHeight + 'px';
});

ion-content won't resize when keyboard appears

1 Answers1