Hi,
I have a problem with the input focus in ios, the keyboard covers the input field.
I’m using an app created in ionic 7 with devextreme framework component.it’s working on android device and safari browser in ios device. But facing issue with ionic app in ios device.
Example :
-
While click on the input field. like phone and message then covers the inputs.
-
open the keyboard covers the input field on focus
I tried with few plugins.like capacitor and cordova-keyboard-plugin.However, didn’t get success on it.
Tried with capactior config change and applied all keyboardResize mode like body,ionic, native and none. However, it’s not working.
import { KeyboardResize, KeyboardStyle } from '@capacitor/keyboard';
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'Ionic App',
appName: 'Ionic App',
webDir: 'www',
bundledWebRuntime: false,
plugins: {
Keyboard: {
resize: KeyboardResize.Body,
style: KeyboardStyle.Dark,
resizeOnFullScreen: true,
},
},
};
export default config;
Form with devextreme component.
<div class="dashboard">
<div class="dashboard__header">
<h3 class="dashboard__title">Support</h3>
</div>
<div class="dashboard__body">
<div class="dashboard__main">
<div class="dashboard__container">
<div class="entity-detail">
<h4 class="dashboard__subtitle">
Support
<button
id="applychanges-sav-btn"
class="btn-add"
title="Send Request"
(click)="save()"
>
<span class="icon-send"></span>
</button>
</h4>
<div class="entity-detail__content ion-content-scroll-host">
<ion-content [scrollY]="false">
<div #contentDetail class="content-detail">
<form class="form" [formGroup]="getInContactForm" (ngSubmit)="save()">
<div class="flex-container">
<h4 class="dx-header-row">Contact form</h4>
<div class="input-group-horizontal">
<label for="companyName" class="form-label"
>Company Name<span class="required"></span
></label>
<dx-text-box [readOnly]="true" formControlName="companyName" valueChangeEvent="input"></dx-text-box>
</div>
<div class="input-group-horizontal">
<label for="userName" class="form-label"
>User Name<span class="required"></span
></label>
<dx-text-box [readOnly]="true" formControlName="userName" valueChangeEvent="input"></dx-text-box>
</div>
<div class="input-group-horizontal">
<label for="surName" class="form-label">Surname </label>
<dx-text-box [readOnly]="true" formControlName="lastName" valueChangeEvent="input"></dx-text-box>
</div>
<div class="input-group-horizontal">
<label for="firstName" class="form-label">First Name </label>
<dx-text-box [readOnly]="true" formControlName="firstName" valueChangeEvent="input"></dx-text-box>
</div>
<div class="input-group-horizontal">
<label for="PrimaryEmail" class="form-label"
>Email <span class="required"></span
></label>
<dx-text-box
[focusStateEnabled]="false"
[showClearButton]="true"
formControlName="email"
valueChangeEvent="input"
></dx-text-box>
</div>
<div class="input-group-horizontal">
<label for="Phone" class="form-label"
> Phone <span class="required"></span
></label>
<dx-text-box
format="#"
[showClearButton]="true"
formControlName="phone"
valueChangeEvent="input"
[maxLength]="20"
appPhoneMask
>
</dx-text-box>
</div>
<div class="input-group-horizontal">
<label for="message" class="form-label"
> Message <span class="required"></span
></label>
<dx-text-area
formControlName="message"
valueChangeEvent="input"
[maxLength]="1000"
(onOptionChanged)="onOptionChanged($event)"
></dx-text-area>
</div>
</div>
</form>
</div>
</ion-content>
</div>
</div>
</div>
</div>
</div>
</div>
With android everything works fine, the problem occurs with ios.
what can be the cause of this behavior?