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';


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

  templateUrl: './',

  styleUrls: ['./'],


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");


      let data = {

        'remarks': remarks,

        'image': this.imageBase64






  back() {



  async presentToast(message) {

    const toast = await this.toastController.create({

      message: message,

      duration: 2000








    <ion-buttons slot="start">

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

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



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




  <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()"



 <div id="remarksArea">


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

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





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


[](https://Video Link )