Vertical ion-scroll not implemented correctly as footer button overlays list components

Question

I am having a bit of a problem setting up ion-scroll on one screen in my Ionic mobile application. On my application's Book page, wherein I have the two problems:

1) The Confirm button does not integrate too well with the list component. I'd like it to remain fixed at the bottom but at the same time, I would like the list to fit around it somehow. I am not sure how to do this and would appreciate some guidance in this area.

2) The list does not seem to want to scroll at all, so I can't see any of the list items beyond "Winter Check" on my iPhone4 which I am using for testing. There is one more item, "Timing Belts" which cannot be seen.

Does anyone have any advice on how I can get vertical scroll properly working on this screen? My code on this screen is as follows:

<ion-view view-title="Book">
  <ion-content>
    <div class="list">
      <div class="item item-input-inset" style="background-color: #2784c9; border-top: 0px">
        <label class="item-input-wrapper">
          <input type="text" placeholder="What service are you after?" style="width: 100%;" ng-click="showBookingForm=true; showServiceList=true">
        </label>
        <button class="button button-positive button-small" ng-click="showBookingForm=false; showServiceList=false"><i class="ion-close"></i></button>
      </div>

      <!-- Date, time, number of people attending -->
      <div ng-hide="showBookingForm">
        <label class="item item-input">
          <input type="text" placeholder="Date">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Time">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Number of people attending">
        </label>
      </div>

      <!-- List of services -->
      <ion-scroll direction="y">
        <div ng-show="showServiceList">
          <ul class="list">
            <li class="item" style="line-height: 16px; padding-top: 13px; font-size: 14px;" ng-repeat="service in businessServiceList">
              <p>{{service.title}}</p>
            </li>
            <li class="item" style="line-height: 16px; padding-top: 13px; font-size: 14px;" ng-repeat="service in businessServiceList">
              <p>{{service.title}}</p>
            </li>
          </ul>
        </div>
        </<ion-scroll>
    </div>
  </ion-content>

  <div style="position: absolute; bottom: 0px; width: 100%;">
    <div class="row">
      <div class="col">
        <a href="#/app/confirm/1/1" class="button button-full button-balanced" style="margin-bottom: 0px">Confirm</a>
      </div>
    </div>
  </div>
</ion-view>

I've created a CodePen here: http://codepen.io/anon/pen/WrMEpO. Just click on the What service are you after? text field to view the list.

Answer 1

Use ion-footer-bar this work great ;)