我在AndroidManifest.xml中尝试了两个选项
android:windowSoftInputMode="adjustResize"
和android:windowSoftInputMode="adjustPan"
使用adjust AdjustResize可以推高我的背景图像,使其看起来很垃圾。如果您向下滚动,它也允许此怪异的白色部分。参见第二张和第三张图片。
如果我使用adjustPan,它看起来不错,并且可以解决问题,但是在分辨率较低的设备上,输入被键盘隐藏了,由于无法滚动,用户无法进入它们。
理想情况下,我希望背景图像的行为类似于adjustPan,但输入/其他内容的行为类似于adjustResize。
还可以动态更改此设置,例如取决于您是哪一页?
编辑添加的代码:
<ion-content no-bounce has-bouncing="false" forceOverscroll="false">
<div class="content">
<div>
<ion-img src="./../../../assets/img/branding/logo.png"></ion-img>
</div>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" #formCtrl="ngForm">
<ion-grid>
<ion-row class="row-padding-one"></ion-row>
<ion-row>
<ion-col size-sm="6" offset-sm="3" class="input-col">
<ion-item class="custom-item" lines="none">
<ion-input
class="login-input"
type="text"
formControlName="email"
[formControl]="loginForm.controls['email']"
placeholder="E-Mail"
required>
</ion-input>
<div *ngFor="let validation of loginValidationMessages.email">
<div class="error-message"
*ngIf="loginForm.get('email').hasError(validation.type) && loginForm.get('email').touched">
{{validation.message}}</div>
</div>
</ion-item>
...
.content {
width: 100%;
height: 100%;
padding: 0;
position: relative;
background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
background-size: cover !important;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left;
}
答案 0 :(得分:1)
尝试放置该页面离子含量的背景图像。 这将解决问题!
答案 1 :(得分:1)
您可以这样做:
ion-content{
--background: url('../../assets/imgs/background-image.png') 0 0/100% 100% no-repeat;
}
它将调整您的输入和其他内容的大小,但您的图片始终为100%;
答案 2 :(得分:0)
将CSS添加到
.scroll-content {
padding-bottom:0!important;
}
这是
中的已知问题https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/19
更多信息
https://forum.ionicframework.com/t/keyboard-hides-input-until-i-start-typing/60827/9