Having some trouble setting up ion-scroll on a specific screen in my mobile application built with Ionic. On the Book page of my app, I'm encountering two main issues:
https://i.stack.imgur.com/MnheG.png
1) The placement of the Confirm button doesn't integrate well with the list component. I want it to remain fixed at the bottom while allowing the list to fit around it somehow. I need guidance on how to achieve this.
2) The list is not scrollable, blocking visibility of any items beyond "Winter Check" on my iPhone 4, which I'm using for testing purposes. There's an additional item called "Timing Belts" that is currently hidden due to the lack of scrolling functionality.
I'm hoping someone can provide advice on how to properly enable vertical scrolling on this screen. Here's the code snippet relevant to this issue:
<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>
For a live demonstration, I've prepared a CodePen available at http://codepen.io/anon/pen/WrMEpO. To see the list, simply click on the input field labeled "What service are you after?"