When keyboard up div height changing

I have this form.


When i click the input the div size changing, like half of height .

My html here.


<ion-content padding>


  <form #imageForm="ngForm" style="height: 100%">

    <div class="img-container">
      <button ion-button small (click)="selectImage()" *ngIf="!imgUrl">Yüklenecek fotoğrafı seçin</button>
      <ion-row style="max-height: 100%; max-width: 100%">
        <img src={{imgUrl}}>
      </ion-row>
    </div>

    <input hidden [(ngModel)]="imgUrl" required name="image">
    <br>

    <ion-item style="width:95%">
      <ion-label stacked color="primary" style=font-size: large">Açıklama</ion-label>
      <ion-input type="text" [(ngModel)]="title" required name="title" placeholder="..."></ion-input>
    </ion-item>


    <ion-item no-lines>
      <ion-row class="action-sheets-basic-page">
        <ion-col>
          <button ion-button (click)="selectImage()" style="width: 100%" [disabled]="!imgUrl">Yeniden Seç...</button>
        </ion-col>

        <ion-col>
          <button [disabled]="!imageForm.form.valid" type="submit" ion-button (click)="upload()" color="danger"
                  style="width: 100%">Gönder
          </button>
        </ion-col>
      </ion-row>
    </ion-item>
  </form>
</ion-content>

And my scss

page-new-post {
 
  .scroll-content{
    padding-bottom: 0 !important;
  }

.img-container {
  border: 2px dashed #d7d7d7;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-container img {

  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

If i remove form height(100%) and giving 300px height to img-container it works well but how can i give the percentage.
Can somenone help me , thanks already…

1 Like

Can someone help me about this issue