How to allow the content to scroll above the input box control by the keyboard?


#1

I am creating a comment section in my app I got the input box to be above the keyboard but i don’t know how to get the comments above to scroll above the input box with the comments any suggestion.

<ion-view view-title="Comments" class="post-detail">
<div class="main-post item item-avatar no-border">
  <h2 class="post-author" ng-click="">
    {{ post.name }}
  </h2>
  <span class="post-time">
    <i class="ion-ios-timer-outline"></i>
    {{ post.time }}
  </span>
</div>

<div class="padding">
  <p>{{ post.content | nl2br}}</p>

  <p>
    <a ng-click="toggleLike(post)" class="subdued">
      <i class="ion-heart assertive" ng-if="post.liked"></i>
      <i class="ion-heart" ng-if="!post.liked"></i>
      {{ post.likeCount}} like
    </a>

    <a ng-click="toggleLike(post)" class="subdued">
      <i class="ion-heart assertive" ng-if="post.liked"></i>
      <i class="ion-heart" ng-if="!post.liked"></i>
      {{ post.likeCount}} dislike
    </a>

  </p>

</div>

<div class="item item-avatar post-comment" ng-repeat="comment in post.comments">
  <img ng-src="{{comment.face}}">
  <h3 class="post-author">
    {{ comment.name }}
  </h3>
  <p>{{ comment.content | nl2br}}</p>
  <a class="subdued like-count">
    <i class="ion-heart assertive" ng-if="comment.liked"></i>
    <i class="ion-heart" ng-if="!comment.liked"></i>
    {{ comment.likeCount}}
  </a>
  <span class="post-time">
    <i class="ion-ios-timer-outline"></i>
    {{ comment.time }}
  </span>
</div>

  </ion-content>
    <form name="sendMessageForm" ng-submit="sendMessage(sendMessageForm)" novalidate>
    <ion-footer-bar keyboard-attach  class="bar-stable message-footer">
     <!--  <div class="footer-btn-wrap">
        <button class="button button-icon icon ion-android-attach"></button>
      </div> -->
        <input ng-model="input.message" class="item-input-wrapper" type="search" placeholder="Trash a comment">
      <div class="footer-btn-wrap">
        <button class="button button-icon icon ion-paper-airplane footer-btn" type="submit"
                ng-disabled="!input.message || input.message === ''">
        </button>
      </div>
    </ion-footer-bar>
  </form>
</ion-view>