# hybrid-app-development

Published articles for hybrid-app-development.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Keeping Form Elements Visible in Hybrid iOS Apps

DevFeed: [Keeping Form Elements Visible in Hybrid iOS Apps](<https://devfeed.tech/articles/maintaining-focus-19121.md>)

Original publisher: [Read original article](<https://medium.com/rbi-tech/maintaining-focus-4d111697f79a?source=rss----904782439303---4>)

Author: Andy Weiss

Published: 2021-02-28T14:19:06Z

Content type: tutorial

Language: en

Sources: [RBI Tech](<https://devfeed.tech/sources/rbi-tech.md>)

Topics: [Forms](<https://devfeed.tech/topics/forms.md>), [Ionic](<https://devfeed.tech/topics/ionic.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>)

Tags: [android-studio](<https://devfeed.tech/tags/android-studio.md>), [forms](<https://devfeed.tech/tags/forms.md>), [hybrid-app-development](<https://devfeed.tech/tags/hybrid-app-development.md>), [ionic](<https://devfeed.tech/tags/ionic.md>), [ios](<https://devfeed.tech/tags/ios.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [simulator](<https://devfeed.tech/tags/simulator.md>), [view](<https://devfeed.tech/tags/view.md>)

### AI overview

This tutorial examines why form elements can be covered by the soft keyboard in hybrid iOS app web views, despite behaving correctly in mobile browsers. It demonstrates a Capacitor-based hybrid app and discusses using the Capacitor keyboard API to improve iOS behavior while leaving Android unchanged.

### Source excerpt

Keeping Form Elements Visible in Hybrid iOS Apps Today's mobile browsers provide a pretty great default user experience for forms. For a very simple example, visit the following url from any mobile browser: https://VisualViewport.andyweiss1982.repl.co. The user experience is great from mobile Safari. When you focus on an input field, the phone's soft keyboard animates up from the bottom of the screen. All of the content comes along for the ride, intelligently sliding up so you can see each input's value as you type. Close out the form and the viewport gracefully recedes from view. However, the same exact code can become far less elegant when consumed from a web view inside of a hybrid iOS app. Not so great inside of an iOS web view Not only do we lose the "Done" button that closes the keyboard without submitting the form; in many cases, the keyboard will pop up without displacing the form elements, covering them entirely and making the form appear completely useless! Well, It works in my web browser? 🤷♂ For reference, here is the full code for the original user experience as viewed from the mobile web: https://medium.com/media/7d7adf83c321357f9af250d2c90d1d4e/href To move this code inside of a web view, we can use Ionic's capacitor package to generate a bare-bones hybrid app that can be run in a simulator. Following the docs, you can create a new project, give it a name and assign it a directory, and then add the Android and iOS platforms. npx @capacitor/cli create? App name hybrid-forms-test ? App Package ID (in Java package format, no dashes) com.example.app ? Directory for new app hybrid-forms-test ? Which npm client would you like to use? yarnAdd platforms using "npx cap add":npx cap add android npx cap add ios For the purposes of this demo, you can just copy and paste the following code into www/index.html to generate a carbon copy of the original example into a boilerplate capacitor web view that can be run as either an iOS or Android application: https://me