Position fixed element hides behind virtual buttons on Android

Position fixed element hides behind virtual buttons on Android - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Position fixed element hides behind virtual buttons on Android (/showthread.php?tid=5758516)

Position fixed element hides behind virtual buttons on Android - DaemonSic - Nov 26, 2017

I am working on some project, and after testing I have noticed that if the device has virtual buttons(on-screen), then div element that is supposed to be always fixed at the bottom, is behind those buttons. Basically I have lets say 2 divs, one is 100vw 100vh, the other one is 100vw wide and has height of 60px, instead of going above(stacked) the buttons, it goes beneath those buttons and is invisible unless the user hides his virtual buttons.
Is there a way to detect if the user has virtual buttons, and then just use some JS magic, or can it be fixed with a simple CSS solution?

Here is my JS Fiddle.
https://jsfiddle.net/hc9fvdgc/

RE: Position fixed element hides behind virtual buttons on Android - Nachfolger - Nov 26, 2017

I'm not sure that you can detect a device with "virual buttons" (whatever that may be) but you can detect a mobile device - https://stackoverflow.com/questions/6666907/how-to-detect-a-mobile-device-with-javascript

If it's a mobile device, why not just use an expandable sidebar instead of the toolbar? It's not going to work as well on mobile.

RE: Position fixed element hides behind virtual buttons on Android - DaemonSic - Nov 26, 2017

(Nov 26, 2017 06:45 AM)Nachfolger Wrote: I'm not sure that you can detect a device with "virual buttons" (whatever that may be) but you can detect a mobile device - https://stackoverflow.com/questions/6666907/how-to-detect-a-mobile-device-with-javascript

If it's a mobile device, why not just use an expandable sidebar instead of the toolbar? It's not going to work as well on mobile.

I meant virtual buttons, on-screen buttons or whatever they are called.

RE: Position fixed element hides behind virtual buttons on Android - Nachfolger - Nov 26, 2017

(Nov 26, 2017 06:51 AM)DaemonSic Wrote: I meant virtual buttons, on-screen buttons or whatever they are called.

A Keyboard?

RE: Position fixed element hides behind virtual buttons on Android - DaemonSic - Nov 26, 2017

(Nov 26, 2017 07:04 AM)Nachfolger Wrote: A Keyboard?

This.