Modal Dismiss leaves some spaces when dismissed with data

I have a strange problem going on. If anyone could help it will be helpful. The problem is when i dismiss the modal it leaves a space in screen and the content is behind that space.

Hi @smarak , Could you please shared the code , So it might be easy to trouble shoot…
And if it is possible please share the video as its not clear in the screen shot…

I think the problem is with keyboard! because when keyboard closes it leaves that unwanted space.

import { Component, Input, OnInit } from '@angular/core';

import { ToastController, ModalController } from '@ionic/angular';

import { PhotoService } from 'src/app/services/photo.service';

import { Keyboard } from '@ionic-native/keyboard/ngx';

@Component({

  selector: 'app-camera-modal-page',

  templateUrl: './camera-modal-page.page.html',

  styleUrls: ['./camera-modal-page.page.scss'],

})

export class CameraModalPagePage implements OnInit {

  // @In image: string;

  @Input("image") image;

  @Input() remarks: string;

  private myImage: string

  private imageBase64: string

  private ifImageClicked = false

  private ifMarkInBtnVisible = false

  private ifMarkOutBtnVisible = false;

  private ifTimeLoctxtVisible = false

  private ifalreadyMarkedOut = false;

  latitude: number

  longitude: number

  private userLocation: string

  private isLoading = false;

  constructor(private modalController: ModalController, private photoService: PhotoService, private toastController: ToastController) { }

  ngOnInit() {

  }

  takeAPhoto() {

    this.photoService.addNewToGallery().then((result) => {

      console.log("photo: " + result.base64String);

      this.imageBase64 = result.base64String

      this.myImage = "data:image/png;base64, " + result.base64String

      this.ifImageClicked = true

      this.ifTimeLoctxtVisible = true

    });

  }

  

  async dismiss(remarks) {

    remarks = this.remarks;

    if(!this.remarks && !this.imageBase64){

      this.presentToast("Please add remarks and image");

    }else if(!this.remarks && this.imageBase64){

      this.presentToast("Please add remarks");

    }else if(this.remarks && !this.imageBase64){

      this.presentToast("Please add image");

    }else{

      let data = {

        'remarks': remarks,

        'image': this.imageBase64

      };

      this.modalController.dismiss(data);

    }

   

  }

  back() {

    this.modalController.dismiss()

  }

  async presentToast(message) {

    const toast = await this.toastController.create({

      message: message,

      duration: 2000

    });

    toast.present();

  }

}

//

<ion-header>

  <ion-toolbar>

    <ion-buttons slot="start">

      <ion-button (click)="back()">

        <ion-icon name="arrow-back"></ion-icon>

      </ion-button>

    </ion-buttons>

    <ion-title>Add Image and Remarks</ion-title>

  </ion-toolbar>

</ion-header>

<ion-content>

  <div id="cameraContainer">

    <ion-img [src]="myImage" style="margin: 10px;"></ion-img>

    <ion-icon name="camera" style="width: 50px; height: 50px; margin: 80px;" (click)="takeAPhoto()"

      *ngIf="!ifImageClicked"></ion-icon>

  </div>

 <div id="remarksArea">

   <ion-item>

    <ion-label position="stacked">Remarks</ion-label>

    <ion-textarea [(ngModel)]="remarks" placeholder="Enter your remarks here"></ion-textarea>

   </ion-item>

 

 </div>

   

<ion-button expand="full" (click)="dismiss(remarks)" style="margin: 10px;">Add Remarks</ion-button>

</ion-content>

[https://we.tl/t-kdd7lJagsP](https://Video Link )