我正在 Ionic 中开发一个简单的应用程序。
我有一个问题,键盘将我的输入字段向上推到另一个 div 上,而键盘有足够的空间。我该如何解决?我已经在互联网上浏览过,但无法找到解决我的问题的任何方法。
发生的情况是这样的:
正如您所看到的,文本在图像中,没有理由这么高。它下面有足够的空间。
这是我的代码:
HTML:
<ion-header>
<ion-navbar>
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="login content">
<div class="logo-container">
<img src="assets/imgs/Mikos_logo.jpeg" class="logo-img">
</div>
<div class="center">
<p>Vul hier je naam in:</p>
<ion-item class="code-field">
<ion-input placeholder="naam" type="text" (keyup)="nameInput()" [(ngModel)]="name"></ion-input>
</ion-item>
</div>
</ion-content>
CSS:
page-login {
.login {
background-color: #EEEEEE;
}
.logo-container{
position: absolute;
width: 400px;
left: calc(50% - 400px / 2);
}
.logo-img{
display: block;
width: 100%;
height: auto;
}
.center{
position: absolute;
top: 40%;
width: 300px;
left: calc(50% - 300px / 2);
}
@media only screen and (max-width: 600px) {
/* For mobile phones: */
.logo-container{
position: absolute;
width: 300px;
left: calc(50% - 300px / 2);
}
}
}
我尝试过的:
我已经添加了离子本机键盘 https://ionicframework.com/docs/native/keyboard/并将其添加到我的应用程序模块中:
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
不幸的是这没有奏效。
Update:
Adding
.scroll-content {
padding-bottom: 0 !important;
}
也不工作。
这是 Ionic 3 的一个已知错误,可以通过添加以下 CSS 样式来修复:
.scroll-content {
padding-bottom: 0 !important;
}
我也遇到过类似的问题,这段 CSS 修复了它。
当输入获得焦点时,Ionic 会在输入框的底部添加一些填充scroll-content
类,为键盘创造空间。
Update
相对顶部定位也可能会导致问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)