Keyboard overlays popover when using forms

Hello everyone

I have issue with android keyboard overlays form in popover

This is my form

1592595644731409×843 79 KB

When input is focused android keyboard appears

2402×838 90.2 KB

My code:

import {
  PopoverController
} from 'ionic-angular';

export class ParentPage {
 constructor(
    private popCtrl: PopoverController,
  ) {}
........................ many code
presentPromoModal()
  {
    let popHtml = this.popCtrl.create("ProfilePromocodePage");

    popHtml.present();
  }
................. many code
}

Popover

export class ProfilePromocodePage implements OnInit {

  promoCodeForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private viewCtrl: ViewController,
    ) {
  }

  ngOnInit() {
    this.promoCodeForm = this.fb.group({
      code: ['', [Validators.required]],
    });
  }

  handlePromoCodeActivateClick() {
    console.log('activate promo code');
  }
}

HTML popover

<ion-header>
  <ion-navbar>
    <ion-title>Connect ....</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <div item-content class="form-wrapper">
      <div class="promo-code-form" [formGroup]="promoCodeForm">

        <input id="code" formControlName="code" placeholder="some text">
        <input>

        <button ion-button class="button--text-rounded" [disabled]="!promoCodeForm.valid"
          (click)="handlePromoCodeActivateClick()">
          Connect
        </button>
      </div>
    </div>
</ion-content>

How to move up the form or popup to show submit button?

Version: Ionic 3
from package-json:
“ionic-angular”: “3.9.5”,
“@angular/core”: “5.2.11”

Sorry for poor english

1 post - 1 participant

Read full topic