To ensure that the Google Maps occupies the full height of the screen on all devices, regardless of size, including a fixed-height button at the bottom, I am utilizing Ionic 3.
Currently, the layout appears perfect on an iPhone 5, but on an iPhone X with a larger screen, the map is excessively large. The display on an iPhone 6 falls somewhere in between, not quite satisfactory.
<ion-content no-bounce>
<div class="container">
<ion-list class="autocomplete-list">
<ion-item class="autocomplete-class" type="text" placeholder="Pick an address">{{this.geocoding.locationObject}}</ion-item>
</ion-list>
<div #map id="map"></div>
</div>
<div class="buttonContainerSafeArea">
<button (click)="next()" class="addLocationButton">Next</button>
</div>
</ion-content>
The CSS code used is as follows:
.container {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
background-color: black;
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#map {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
position: fixed;
top: 11%;
width: 100%;
height: 74.9%;
z-index: 99;
padding: 0;
margin: 0;
}
.addLocationButton {
position: absolute;
bottom: 0;
z-index : 999;
width: 100%;
height: 45px;
margin: 0;
text-align: center;
vertical-align: middle;
font-size: 15px;
font-family: $font-family-buttons;
font-weight: 500;
color: #ffffff;
background-color: $red-color;
opacity: 0.9;
}
.buttonContainerSafeArea {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}