(Mobile) Detect if "Keyboard is visible"

Need help Mobile
1

Hi there,

I have a page with:

  • a fixed height header (Grey)
  • page with search input which adapts to screen height (White)
  • fixed height Bottom Navigation (Grey)

The problem is following: when the keyboard is visible the page gets squeezed by: header, Keyboard & Bottom Navigation. (as you can see in the video) leaving a very small area for the page. The problem gets bigger as the screen height gets smaller.

Is there any way to know if “mobile keyboard is visible”? (which would allow me to hide the bottom Navigation in that case)

Thanks :slight_smile:
Maze

2

Hi,

I guess you mean that you have an input field and on ios when clicking inside it will zoom in right?

There are many different solutions, but the behaviour is native for ios (I don’t know about android)

Possible solutions:

  1. Disable zoom in meta tag
  2. Use js events to change meta tag dynamically
  3. Set font-size for inputs to smaller (don’t know in bubble if that works)

also you can get the type of the device with some css. just look for css @media

3

No it is that the screen gets squeezed by the keyboard and therefore I need to hide the Footer (or Bottom Navigation).

I created a test page that shows the problem… Also on smaller devices it gets even a bigger problem.

https://streamable.com/866hgq

4

Does anyone have a solution?

5

@emmanuel this seems to be an issue and everywhere i see people asking, there is no solution. I don’t need my floating menu bar at the bottom to appear above the keyboard when i click onto an input box.

1 Like
6

the only way I know is to put a condition to not be visible when the input is focused… I’m also looking for a solution to detect in any input

7

@zenitheafrik Did you ever find a solution for this?

8

Have you perhaps tried this?