How can i avoid the virtual keyboard overlapping input fields in webview?

Question

I have a Genero web-app that displays a webview of an Angular app. MY issue I'm having is that the view (Chrome v72 based) will not scroll under an input when it gets the focus to allow the user to see what he's typing.

Loading the page in a browser works just fine and I've tried it in an Android studio webview which also works.

So I don't know if it's Genero in itself that is causing the problem or maybe some specific way it renders the view, different browser configuration, etc.

All ideas are welcome if you've faced this kind of problem, regardless of the context. I'll try everything and i'd like to avoid having to put some hack that creates space under the input and manually scrolling on focus.

Answer 1

This was a purely Genero issue that has to my knowledge has been fixed since.

Answer 2

What is happening is that your height of you div is not adjusting to the virtual keyboard.

I would suggest to do something like this, in the constructor:

const $resizeEvent = fromEvent(window, 'resize')
       .map(() => {
         return window.innerHeight;
       })
       .debounceTime(20).subscribe(data => {
          this.overflowHeight = `${data}px`;
       });

What this will do is detect a resize, it will tigger when a keyboard show up. Then you change the height to the new height of the div. When it close it will trigger again and make it the normal size again.

In your html:

<div [ngStyle]="'height': overflowHeight, 'overflow': 'auto'}" [scrollTop]="scrollHeight"></div>

Heads up if you use an child view make sure you check how many pixel are surrounded and do the height - pixels.

Every input need to have an unique id:

<input id={{uniqueId}} (focus)="scrollTo(uniqueId) (scroll)="setScrollHeigth($event)" />

And then you do:

private scrollTo(_index: any) {
        if (window.screen.width === 360) {
            height = document.getElementById(_index).offsetTop;
            if (height > 0) { this.scrollHeight = height; }
            else if (this.scrollHeigthElm > 0) { this.scrollHeight = 0; }
        }
} 

private setScrollHeigth(_event: any) { 
    this.scrollHeigthElm = _event.srcElement.scrollTop; 
} 

What this do is check if your scroll is higher then zero and move it. And reset it when your scroll is at 0.

Answer 3

Make sure you are using INPUT statement and not DISPLAY in conjunction with your WEBCOMPONENT. This was reported with Android https://4js.com/support/issue/?id=GMA-1319 but the same principal could apply iOS, GBC, GDC

Otherwise raise a case with your local 4Js support contact (assuming you are under maintenance). There have been cases in the past where work has been done in that area https://4js.com/support/issue/?id=GMA-920 and so there may need to be some refinement in that area.

PS With reference to your opening paragraph, 4Js Genero has a paid support model. The paradox of this is you won't see many 4Js Genero questions here because they should be answered 1. by your local support contact and 2. our developer forum. This then works against us in language popularity measurements that use measures such as number of Stack Overflow posts.