Full height of modal

ionic-v1
1

I am trying to make a div element the full height of my $IonicModal.

However, I cannot get it to work.

Here’s the code:

<ion-modal-view>
	<ion-header-bar>

		<h1 class="title">Map</h1>

	</ion-header-bar>

	<ion-content>

		<div style="position:absolute; height: 100%; width: 100%; background-color: blue;"></div>
	
	</ion-content>
</ion-modal-view>

What am I doing wrong?

2

Padding? And make it ~!important.

3

Did you figure it out ? I have the same issue …

4

Try this to make a modal full height on tablets.

@media (min-width: 680px){
  .modal{
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
}
1 Like