在Ionic 4 Android应用程序中打开键盘可将背景图像向上移动

时间:2019-08-20 05:33:32

标签: android ionic-framework ionic4 capacitor

我在AndroidManifest.xml中尝试了两个选项

android:windowSoftInputMode="adjustResize"android:windowSoftInputMode="adjustPan"

使用adjust AdjustResize可以推高我的背景图像,使其看起来很垃圾。如果您向下滚动,它也允许此怪异的白色部分。参见第二张和第三张图片。

如果我使用adjustPan,它看起来不错,并且可以解决问题,但是在分辨率较低的设备上,输入被键盘隐藏了,由于无法滚动,用户无法进入它们。

理想情况下,我希望背景图像的行为类似于adjustPan,但输入/其他内容的行为类似于adjustResize。

还可以动态更改此设置,例如取决于您是哪一页?

Normal

image moved up

weird white on scroll down

编辑添加的代码:

    <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;
}

3 个答案:

答案 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