Hello, I have a strange issue where the style of the ‘bottom’ part of a modal is not being applied, but only when
running on the device, emulator, or through Ripple ionic serve…It works fine when just testing it in a browser
(Chrome in my case).
I have pasted the code below - its the bottom 25% that is not working - the modal just takes up all the available space
to the bottom of the screen on the device. The other parts of the style are being applied OK.
Any thoughts on this will be greatly appreciated.
Thanks!
<script id="popover.html" type="text/ng-template">
<ion-popover-view style="height:110px; width: 185px;">
<ion-content>
<div class="list">
<a class="item" ng-click="showAbout()">
About
</a>
</div>
</ion-content>
</ion-popover-view>
</script>
<script id="modal.html" type="text/ng-template">
<ion-modal-view style="width: 50%; height: 50%; top: 25%; left: 25%; right: 25%; bottom: 25%;">
<div class="card">
<div class="item">
<h3>Hello</h3>
<p>by <a href="http://ionicframework.com/" target="_blank">Ionic</a></p>
</div>
</div>
</ion-modal-view>
</script>
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal;
}, {
animation: 'slide-in-up',
scope: $scope
});
$scope.showAbout = function($event) {
$scope.popover.hide();
$scope.modal.show();
};