如何在键盘上方推送表格?

css angular ionic2

85 观看

1回复

794 作者的声誉

我有一个单击按钮时可见的表单。我在该表单中也有多个输入标签。当我在第一个输入上键入数据时,它是可见的,但是第二个和第三个输入标签被隐藏在键盘下。

<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个以上的输入标签,则应该能够滚动输入列表

有人能帮我吗??

作者: Yokesh Varadhan 的来源 发布者: 2017 年 9 月 15 日

回应 1


0

16800 作者的声誉

在设置formDisplaytrue显示表单的按钮(单击)事件上,添加,scroll使表单内容略有增加,输入内容将在屏幕上显示更高,并且不会被键盘隐藏。如下所示:

的HTML

<button ....(click)="displayForm()"...>Display Form</form>   

打字稿

displayForm(){
...
 this.displayForm=true; 
 window.scroll(0, 100); // or an other number of pixels enough to display
...
}
作者: Vega 发布者: 2017 年 9 月 15 日
32x32