Hi.
Im trying to create a modal with some title (ion-header-bar), some content (ion-content) and a footer with a single “Create” button (ion-footer-bar)
The result isnt looking too good, as you can see in the attached picture, Its overlapping the bottom:
this is my template-url, which I show/hide using $ionicModal, the entire code below is in a separate file, and its the full content:
<div class="modal" ng-controller="NewWatchCtrl">
<ion-header-bar class="dialog-header bar-secondary">
<h1 class="title" style="color:#ffffff">New Watch</h1>
<img ng-click="close()" class="button button-clear" src="img/cancel_button.png" width="32" height="32"/>
</ion-header-bar>
<ion-content scroll="true">
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon">
<img ng-src="img/{{watch.request.subject}}.png" width="32" height="32"/></i>
Following by
<select>
<option selected>A</option>
<option>B</option>
</select>
</a>
<div class="border" />
<a class="item item-icon-left" href="#">
<i class="icon">
<img ng-src="img/{{watch.request.type.type}}.png" width="32" height="32"/></i>
Define Price change params
<select>
<option selected>C</option>
<option>D</option>
</select>
<table>
<tr>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number"/>
</td>
</tr>
</table>
</a>
<a class="item item-icon-left" href="#">
<i class="icon">
<img src="img/timeframe.png" width="32" height="32"/></i>
Define Time Frame
<input type="number"/>
</a>
</div>
</ion-content>
<ion-footer-bar>
<button type="submit" ng-click="add()" class="button button-block dialog-footer"><h4 style="color: #ffffff">Create</h4></button>
</ion-footer-bar>
</div>
My styling dialog-footer, dialog-header are merely for background color, nothing too fancy:
.dialog-header {
background-color: #336699;
}
.dialog-footer {
background-color: #4e6377;
}