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…