IPhone X MapView has space under map

[SergioZhydecky]

IPhone X MapView has space under map

<GridLayout>
<MapView #mapView
                 [latitude]="latitude"
                 [longitude]="longitude"
                 [zoom]="zoom"
                 [minZoom]="mapValues.minZoom"
                 [maxZoom]="mapValues.maxZoom"
                 [bearing]="mapValues.bearing"
                 [tilt]="mapValues.tilt"
                 [padding]="mapValues.padding"
                 (mapReady)="onMapReady($event)"
                 (coordinateTapped)="onCoordinateTapped($event)"
                 (cameraChanged)="onCameraChanged($event)">

</MapView>
<StackLayout class="close-button" (tap)="closeMap()">
  <Label class="hh-icon" text="&#xe90b;"></Label>
</StackLayout>

<StackLayout class="save-button">
  <NewUIButton [label]="'area.button.add_area' | translate" backgroundColor="#50C6DB" (tap)="addAreas()"></NewUIButton>
</StackLayout>
</GridLayout>

const MAP_UI_SETTINGS: UISettings = {
  rotateGesturesEnabled: false,
  tiltGesturesEnabled: false,
  compassEnabled: false,
  indoorLevelPickerEnabled: false,
  mapToolbarEnabled: false,
  myLocationButtonEnabled: false,
  scrollGesturesEnabled: true,
  zoomControlsEnabled: false,
  zoomGesturesEnabled: true
};

const MAP_STYLES: KmlMapStylesInterface = {
  fillColor: new Color(0, 255, 255, 255),
  fillColorSelected: new Color(75, 0, 142, 204),
  strokeColor: new Color('#61CCC1'),
  strokeWidth: isIOS ? 1 : 3
};

const MAP_VALUES: KmlMapValuesInterface = {
  latitude: 56.039267,
  longitude: 10.456494,
  minZoom: 7,
  maxZoom: 13,
  zoom: 7,
  bearing: 0,
  tilt: 0,
  padding: [0, 0, 0, 0]
};

[logangeorge01]

I'm not sure if this was the same problem I had, but I solved mine by enclosing all of the html in a tag. Let me know if this works for you.

[PashaArkus]

set iosOverflowSafeArea="true" for MapView