我有一个在单击按钮时可见的表单。我在该表单中也有多个输入标签。当我在第一个输入上键入数据时,它是可见的,但第二个和第三个输入标签隐藏在键盘下。
<div class="showmodal" *ngIf="formDisplay">
<div class="containdiv">
<ion-row class="milkColor">
<ion-label style="padding-left: 5%;">Add New Contact </ion-label>
<ion-icon class="iconPad" name="close" (click)="cancel()" > </ion-icon>
</ion-row>
<form #form="ngForm" (ngSubmit)="logForm(form)" novalidate>
<ion-row>
<ion-col>
<ion-label text-right> <b>Name :</b> </ion-label>
</ion-col>
<ion-col>
<ion-input [value]="name" name="name" [(ngModel)]="name" type="text" placeholder="Contact Name" required></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label text-right> <b>Occupation :</b> </ion-label>
</ion-col>
<ion-col>
<ion-input [value]="service" name="service" [(ngModel)]="service" type="text" placeholder="Occupation" required></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-label text-right > <b>Contact No. :</b> </ion-label>
</ion-col>
<ion-col>
<ion-input [value]="number" name="number" [(ngModel)]="number" type="number" placeholder="Number" required></ion-input>
</ion-col>
</ion-row>
<ion-row >
<ion-col text-center>
<button [disabled]=!form.valid class="textLower" ion-button type="submit" value="Submit" >Submit</button>
</ion-col>
</ion-row>
</form>
</div>
</div>
在我的CSS中
.showmodal {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: rgba(23, 22, 22, 0.2);
z-index: 10;
left: 0px;
}
.showmodal .containdiv {
background: white;
margin-top:52%;
min-height:30%;
overflow:auto;
margin: 150px 20px 0 17px;
}
当表单到达时,我需要所有 3 个输入都可见,如果我有 3 个以上的输入标签,我应该能够滚动输入列表
谁能帮帮我??
最佳答案
在将 formDisplay
设置为 true
以显示表单的按钮(单击)事件上,添加 scroll
以便表单内容显示向上一点,输入将在屏幕上显示得更高,而不是被键盘隐藏。
如下所示:
HTML
<button ....(click)="displayForm()"...>Display Form</form>
typescript
displayForm(){
...
this.displayForm=true;
window.scroll(0, 100); // or an other number of pixels enough to display
...
}
关于css - 如何将表格推到键盘上方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46232625/