Make modal stop at half screen


Is there any way to when the openModal() method runs, make the modal that pops up stop at half the screen. Only want to show a few lines of text.

$ionicModal.fromTemplateUrl('templates/detail.html', {
	scope: $scope,
	animation: 'slide-in-up'
}).then(function(modal) {
	$scope.modal = modal;
$scope.openModal = function() {
$scope.closeModal = function() {
$scope.$on('$destroy', function() {

Never mind, fixed it with some margin on the modal markup

@Ludwig: Tried the same and works well, is there anyway to only say, display 400px of the modal? As I wouldn’t know the screen size of the mobile screen.


Trying to achieve this…

Have you achieved it? I’d love to know how, since I’m trying to do a similar thing.

This looks a lot more like an actionsheet than a modal ($ionicActionSheet/ ), is it not what you’re after?

In my case I want a carousel with icons/buttons so action sheet doesn’t seem to be a good idea. I achieved it by altering the style of the modal to make it smaller and stick to the bottom of the page. It seems to work fine.

@Apavillet: Good suggestion, I might give that a try by having each field as a ‘button’ for the action sheet.

@maksm: I was originally thinking of doing something similar, but I’d probably need to know the total height of all my elements in the modal first. I suppose could be done easily considering it is quite static.

Any updates? I am trying to achieve this same concept.

I modified the existing Modal directives to create a bottom sheet that basically is a modal that covers the half of the screen and has no backdrop. This is the result:

Demo ->


Thanks for the elegant solution. What if I have a footer bar and don’t want the modal cover the footer bar? I am new to Ionics and any help is appreciated. Thanks.

how to create background view translucent like actual modal… actually I am still able to click background functionality

You know how can I put the backdrop again? I need that.