In Android SPA, form gets distorted and widgets start overlapping When entering a value in the textbox(keyboard opened)

This thread was migrated from an old forum. It may contain information that are no longer valid. For further assistance, please post a new question or open a support ticket from the Customer Support portal.

#Informational Post​

#Description#

In SPA Mobile - When entering a value in the textbox(keyboard opened), widgets start overlapping in Android SPA.

-> In application ,if we placed the textboxes & other widgets in container(flexScrollContainer) in the form.

-> When we focus the textbox keyboard will be opened and unable to see the text boxes, widgets start overlapping in Android SPA

-> If we start typing something, then we are able to see the textbox

#Root Cause#

The In Android browsers when the key pad is opened, the view port is re-sized to the available area instead of coming on top off the screen. That’s why the entire layout is adjusted to the available size.

This is the expected behavior in android browsers for SPA platforms.

#Solution#

To overcome the above behaviour, Please follow below solution

Write a dolayout function for that flexscrollContainer and fix the height after render. So that 100% will convert to fixed height based on device.

Please write the below snippet on form(ex:frmOne) pre-show and check the behavior.

e.g.

//<<formId>>.<<flexScrollContainerId>>.doLayout = function(model)

frmOne.flexcOne.doLayout = function(model)

{

//<<formId>>.<<flexScrollContainerId>>.height = model.frame.height;

frmOne.flexcOne.height = model.frame.height;

};

here flexcOne is a flexscrolcontainer.

Thank you @Advm Mvthis​ for contributing this helpful information! 👍🏼