CODEWITHSUNDEEP
angularjskeyboardionic-framework
Sietse
Sietse

Reputation: 693

ion-content won't resize when keyboard appears

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: When the keyboard is shown

This is when the keyboard is hidden: When the keyboard is hidden

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

Upvotes: 4

Views: 4294

Answers (1)

Sietse
Sietse

Reputation: 693

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

Upvotes: 0

Related Questions