Issues with vh and mobile keyboards

[Nate]

I'm trying to make a responsive design for mobile devices but have run into a snag regarding the vh unit and the mobile keyboards.

On both iPhones and Androids, the keyboard reduces the viewport's height, and the effects are different on each.

For iPhones, the changed viewport only affects elements that are added or refreshed while the keyboard is active, and the elements stay that way until refreshed without the keyboard.

For Androids, the entire document is adjusted for the new viewport while the keyboard is active, and then reverts back to normal after the keyboard is deactivated.

I've found some custom plugins that can do what I want, but I can't test them with the simulator or companion app which is what I am limited to.

I'm also not precisely sure how to reference the custom plugin I currently have as it doesn't have an <asset> tag in the plugin.xml file.

 

Is there a way to fix this issue, preferably without using custom plugins?  It would also be great if I can fix this simply through css styling.

Thanks!

[Anton Dobrev]

Hello Nate,

I do agree that both platforms behave differently when the keyboard is shown. My observations are however slightly different.

In iOS - the entire document is adjusted in order to make visible the inputs when the keyboard is shown.

In Android, the keyboard overlays the inputs.

If this is really the issue, it is discussed in this Telerik forum thread - You can check this forum thread that discusses the same issue.

Also, I prepared a simple project which you can find here - https://github.com/PlatformSupport/keyboard-input-test . Please, use it for testing and let me know what is the expected behavior on your side. It represents the behavior I explained above.

I look forward to your reply.

Regards,
Anton Dobrev
Telerik

 

 

[Nate]

Thank you for the response, Anton.

 However, my issue is about the way the viewport dimensions change when the keyboard is shown.  When the keyboard is shown, all elements that use the vh css3 unit of measurement are affected.  For example, I have pictures that have height and width based on the viewport height, and when the keyboard is shown, the pictures shrink due to the viewport dimensions being changed.  The differences on iPhone and Android probably didn't matter as much as I thought, so I probably didn't need to describe them.

Is there any way to make sure that the viewport height doesn't change when the keyboard is shown?

[Anton Dobrev]

Hello Nate,

Thank you for specifying this.

I updated the repository with a new code that prevents the viewport resize for Android. It uses the <activity> attribute windowSoftInputMode attribute set to adjustNothing in the AndroidManifest.xml:

<activity android:label="@string/app_name"
                            android:name=".TelerikCallbackActivity"
                            android:windowSoftInputMode="adjustNothing"
                            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
                            android:launchMode="standard"
                            android:theme="@android:style/Theme.Black.NoTitleBar" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

The app uses an img element that is set to use the viewport values for width and height. Yet the behavior is different in both platforms. For iOS the viewport is still resized, but the image keeps its original dimensions even when the keyboard is show. For Android the fix prevents the viewport from resizing.

Let me know if this works for you.

Regards,
Anton Dobrev
Telerik

 

 

[Richardson]

I think there is a simple hack for this issue. An z-index keybord using js display only when the page loads to mobile and tab.Also we need to use label or div instead of textbox or textarea because it trigger device keyboard while user click on it.