Input field Edit box

Hi , I am having issue with edit box which behaves differently sometimes i.e. when I focus on the input field it appears on top of the page sometimes. I have attached image for the reference and my repo link. Please do have a look into it.
Repo : PlayCanvas 3D HTML5 Game Engine


Thank you

@Leonidas @Albertos @LeXXik can you guys look into it

If a touch input is used, it will assume there will be a on screen keyboard as well so the input field will be at the top as it avoids A LOT of issues. If a mouse click is used, the input field will be in place.

So if I have any logo just above the input field even then this edit box overrides it goes on top of screen since its position is given as absolute ?

I don’t understand what you mean? The text input field is a DOM element, not native PlayCanvas UI.

You can do anything you like to the styling by editing the source code

See the documentation here: User Interface - Text Input | PlayCanvas Developer Site

Can We keep that edit box just above the keyboard in mobile device instead of top of screen. because it looks weird

It’s VERY difficult to do so because there’s no browser API to know where the keyboard is and whether it is open or not. That makes it next to impossible to position.

The source code is in the project if you would like to experiment with this or if you think there is a way to do this.