'How to get mobile virtual keyboard height size?

I am developing a page with React. My code is as here How to prevent mobile keyboard from closing when I click button in website?

basically: Just a list with an input field in the end for chat message and button to send it.

Thing is, when virtual keyboard is showing, the last chat messages are covered by the virtual kebyoard which is not good and user doesn't understand sees last message he/she sent.

Question here: How to understand when mobile virtual keyboard is shown, and how to get its height ? If I can get height, then dynamically I can set padding-bottom for my list of messages so user still sees everything

enter image description here

javascriptcssmobilestylingvirtual-keyboard


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions