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.

score 1 · Answer 1 · answered Mar 18 '19 at 20:38

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.

Hello, Thanks for your time: Unless we are not talking about the samething, the webcomponent is already in display mode : INPUT BY NAME WC — Magnesium, Mar 19 '19 at 07:16

Swoox · Answer 2 · 2019-03-18T14:25:26.837

0

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.

edited Mar 18 '19 at 14:25

answered Mar 18 '19 at 13:55

Swoox

3,707
2
21
32

Hello, thanks for taking the time to answer. Size is not the only problem, i've tried a simple HTML with lots of inputs separated by lots of linebreaks and the display will not move even if it has plenty of space under the input. – Magnesium Mar 18 '19 at 14:08
So what you want is that the input will scrollintoview? – Swoox Mar 18 '19 at 14:14
I need to have the default behaviour of a user agent when the user clicks on an input : the browser should scroll so that the virtual keyboard is under the input. Special bonus point would be to be able to scroll under the input even if the page is too small for this put i'll see at that when the first problem is solved :) – Magnesium Mar 18 '19 at 14:18
This is probably cause you're using a child view. I had this problem to. Even an inner div will give problems. check my edit. – Swoox Mar 18 '19 at 14:21
It's hard to follow but you can try this. It will replace the functionalities it normally offers. Inner stuff is a pain, I dealt with it this way. – Swoox Mar 18 '19 at 14:27
Looking more into it and comparing how a browser behaves versus the webview, this seems to really be problem with how the webview is handled. In a browser, opening the keyboards will shrinks down the viewport to the remaining space. Genero seems to just open the keyboard over the display, so there doesn't seem to be a JavaScript way to solve this. – Magnesium Mar 19 '19 at 07:32

score 0 · Answer 3 · answered Mar 19 '19 at 20:01

0

Well, seems like this is more of a Genero problem in the way it handles webviews, putting the virtual keyboard over the webcontent and not inside it. We took it to their forum and they are looking into it.

answered Mar 19 '19 at 20:01

Magnesium

597
6
22

score 0 · Accepted Answer · answered Dec 06 '20 at 15:32

0

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

answered Dec 06 '20 at 15:32

Magnesium

597
6
22

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

4 Answers4