How to stop canvas resizing when mobile keyboard is in use?

Help & Support
1

From this forum post

Is it possible to not make the screen shrink when using this on mobile? The problem is that when the keyboard comes up, the UI decreases in size, as if to compensate for the space the keyboard takes. I don’t want this, instead, the screen should remain the same size and the user scrolls.

EDIT

Actually, the problem only happens on android chrome. On iOS Safari the viewport behaves correctly…

EDIT

I tried following this SO post but it didn’t work.

EDIT

It’s the PlayCanvas’ canvas that resizes once the keyboard comes up. I tested with a simple html file with some input fields, and it didn’t become super small. How can I test that the virtual keyboard is visible,or test that the user tapped on an input field? I can just change the css to the value it was before

EDIT

So…what happens is that the canvas element of PlayCanvas, application-canvas resizes after the keyboard comes up. Changing the style’s height back to what is was is not a viable solution, because by doing so the text becomes unselected, then you need to tap on it again, which resizes the screen…again. On top of this, even if the aforementioned issue didn’t happen, I’d need to be able to scroll the page with my finger to see the whole form content, which I can’t. I can’t scroll the page to see the rest of the fields, even though I tried this solution.

In short, this solution unfortunately does not work for mobile. It works perfectly for desktop though, but unusable for mobile. Hopefully it can be fixed to work on mobile as well.

I guess this can be fixed if there are solutions for the following

  1. Can I prevent the canvas from resizing when mobile keyboard is in use?
  2. Can I make the canvas scrollable with my finger? Can’t seem to be able to make this work.

Thanks.

2

If it is related to the post below, I have the same problem in one of my projects. Unfortunately I was also not be able to find a solution for this.

3

Thanks for the comment. That’s sad ;_;

4

What did you do then? Pure HTML+CSS? Did you add the form page as an iframe? Were you able to scroll then?

5

The project itself is private, but you can see the result if you want. (The game is not working anymore at the moment).

As far as I can remember, yes.

I’m on mobile, so I can’t check the project at the moment.

Do you mean on iOS? As far I can see, no. Probably that was the reason to place the input fields on the bottom.

6

Ok I finally cracked this code, and I’m sharing the results with the community here. If you want to have text input working on mobile, you must use an iframe(I guess doesn’t have to be an iframe…point is, HTML+CSS of your own, I guess it could work if it was all in a div as well). Create a separate HTML file + CSS that is just the form screen.

On the default loading screen, here’s how you can add the iframe(well actually, you don’t need to do this on the loading screen unless the form is the first screen)

var wrapper = document.createElement('div');

        wrapper.id = 'application-splash-wrapper';

        document.body.appendChild(wrapper);

        var iframe = document.createElement('iframe');

        iframe.id = "iframe";

        iframe.setAttribute("style", "position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:" + window.innerHeight + "px; border:none; margin:0; padding:0; overflow: scroll-y");

        const registry = pc.Application.getApplication().assets;

        registry.once('add:105801925', (asset) => {//number is asset's id. I'm getting the html file from the assets folder

            iframe.src = asset.getFileUrl();

            document.body.appendChild(iframe);

        });

The iframe attributes that are set are extremely important, specially for chrome. Otherwise it scales the iframe(less than the PlayCanvas’ canvas, but still) and messes up the layout. Now everytime you type it scrolls to the text input field without changing the layout of your page…

Ps: I hate css. Simple shit like this takes several hours of research to find the right combination of styles and attributes that works across browsers…ffs I just wanted to place a freakin text box and use it, why it has to be so painful.