Keyboard covers the input field on focus in ios - ionic v7

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?

1 post - 1 participant

Read full topic