# Ionic modal height issue

**URL:** <https://forum.ionicframework.com/t/ionic-modal-height-issue/17341>\
**Category:** ionic-v1\
**Created:** [February 9, 2015, 11:59pm UTC](https://forum.ionicframework.com/t/ionic-modal-height-issue/17341 "2015-02-09T23:59:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![naoru](https://avatars.discourse-cdn.com/v4/letter/n/2bfe46/32.png) [@naoru](https://forum.ionicframework.com/u/naoru)\
**Post date:** [February 9, 2015, 11:59pm UTC](https://forum.ionicframework.com/t/ionic-modal-height-issue/17341/1 "2015-02-09T23:59:58Z")

</div>

Hi there  
i have a design in which i need to use a modal that doesn’t occupy the full height of the display

im using the following css  
.modal{  
margin-left:auto;  
margin-right:auto;  
overflow: visible !important;  
width: 80% !important;  
top:10%;  
height:30%;  
background-color:black;  
border:2px solid white;  
border-radius:10px;  
}

but the height is getting ignored  
anyway to achieve this?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [February 11, 2015, 7:46pm UTC](https://forum.ionicframework.com/t/ionic-modal-height-issue/17341/2 "2015-02-11T19:46:07Z")

</div>

Can you put together a codepen to show this?

---

<div class="post-metadata">

**Author:** ![naoru](https://avatars.discourse-cdn.com/v4/letter/n/2bfe46/32.png) [@naoru](https://forum.ionicframework.com/u/naoru)\
**Post date:** [February 11, 2015, 10:48pm UTC](https://forum.ionicframework.com/t/ionic-modal-height-issue/17341/3 "2015-02-11T22:48:36Z")

</div>

![image](https://global.discourse-cdn.com/ionicframework/original/3X/1/a/1a44fc73d4c489fd533c0da9955e3fe54e4d0f9e.jpeg)

image is worth more than thusand word

on mobile screen resolutions i can’t find the way to make the modal window not to stretch all the way down.  
i want it to wrap the contents plus another 20px or so

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [February 13, 2015, 1:53pm UTC](https://forum.ionicframework.com/t/ionic-modal-height-issue/17341/4 "2015-02-13T13:53:12Z")

</div>

Don’t mind the `!important`, codepen is weird like that.

> **[Modal: Nightly](https://codepen.io/mhartington/pen/GgQrWY)**
>
> Demo of an Ionc slide up modal. Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[Modal: Nightly\](http://codepen.io/ionic/pen/gblny/)....

So the modal has a min-height set on to it, so you just have to override that with `min-height: initial;`

---

<div class="post-metadata">

**Author:** ![naoru](https://avatars.discourse-cdn.com/v4/letter/n/2bfe46/32.png) [@naoru](https://forum.ionicframework.com/u/naoru)\
**Post date:** [February 13, 2015, 11:13pm UTC](https://forum.ionicframework.com/t/ionic-modal-height-issue/17341/5 "2015-02-13T23:13:46Z")

</div>

oh man i can’t believe i missed it…

Thanks