Problem with ion-modal-view style - bottom only when running on device


#1

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();
};

#2

I’ll answer my own question - its a CSS issue (an issue for me anyway)

at min-width: 680px it behaves like I want, less than that the modal size is more or less fixed to 100% of the display.