Ion-footer位于键盘顶部
Ion-footer位于键盘顶部
提问于 2021-10-20 13:05:44
我正面临着这个问题，我已经尝试了很多解决方案来解决它。但是我不能解决这个问题。当我在手机上使用Google浏览器上的web应用程序时，键盘的页脚显示出来。有谁有解决方案吗？
<ion-header>
</ion-header>
<ion-content>
<form [formGroup]="formGroupLogin" (ngSubmit)="signIn()">
<ion-grid>
<ion-row>
<ion-col size-sm="6" offset-sm="3" size-md="4" offset-md="4">
<ion-img src="../../assets/rinaldi-logoSVG.svg" style="height: 110px; margin-top: 60px"></ion-img>
<div style="display: grid; align-items: center; justify-content: center;">
<h3 id="title-login">Area Riservata</h3>
</div>
</ion-col>
</ion-row>
<ion-row style="display: flex; justify-content: center; align-items: center;">
<ion-col size-md ="4">
<ion-item>
<ion-label position="floating" style="font-family: Gilmer Medium">Email</ion-label>
<ion-input type="email" email formControlName="Username"></ion-input>
</ion-item>
<span class="error ion-padding" *ngIf="isSubmitted && errorForm.Username.errors?.required">
Email campo obbligatorio
</span>
<span class="error ion-padding" *ngIf="isSubmitted && errorForm.Username.errors?.email">
Formato e-mail errato
</span>
<ion-item>
<ion-label position="floating" style="font-family: Gilmer Medium">Password</ion-label>
<ion-input type="password" formControlName="Password"></ion-input>
</ion-item>
<span class="error ion-padding" *ngIf="isSubmitted && errorForm.Password.errors?.required">
Password campo obbligatorio
</span>
<div style="padding-top: 30px">
<ion-button expand="block" type ="submit" style="--border-radius: 20px; --background: #192437; font-family: Gilmer Medium" >Login</ion-button>
</div>
<div style="display: grid; justify-content: center; align-items: center; text-align: center;">
<a routerLink="/recover-password" style="cursor: pointer; padding-top:10px; font-family: Gilmer Medium">Password dimenticata?</a>
<p style="font-family: Gilmer Medium">Non sei ancora registrato?</p>
<a routerLink="/registrazione" style="cursor: pointer; font-family: Gilmer Medium">Registrati</a>
</div>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-content>
<!-- FOOTER -->
<ion-footer class="ion-no-border" style="display: grid; place-content: center;">
<ion-toolbar class="ion-text-center">
<ion-label class="ion-text-wrap" style="font-size: small; font-family: Gilmer Medium;">©2021 Rinaldi Superforni–Tutti i diritti riservati–
P.IVA 00523850451</ion-label>
</ion-toolbar>
</ion-footer>2天寻找解决方案，但我不能资助任何有同样问题的人。有人能帮我吗？
回答 1
Stack Overflow用户
发布于 2021-10-20 14:05:39
很久以前，在Ionic项目中，每当显示键盘时，我都会遇到需要隐藏页脚的问题，所以我直接这样做了：
<ion-footer translucent="true" class="ion-no-border" *ngIf="footerVisible">
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="12" class="ion-padding ion-align-items-center ion-justify-content-center" style="color: #acacac; display: flex; justify-content: center;">
Do not have an Account?
<a class="btn-create-account red" routerLink="/auth/register">Create an account</a>
</ion-col>
</ion-row>
</ion-footer>..。而且，显然是在课堂上：
ngOnInit() {
(this.el.nativeElement.querySelectorAll('ion-input'))
.forEach(inputEl => {
inputEl.addEventListener('focusin', e => this.footerVisible = false);
inputEl.addEventListener('focusout', e => this.footerVisible = true);
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69646531
复制相关文章
相似问题
腾讯云开发者
