Div cover my input on mobile

Question

I am creating a web application, but I have a problem with my css.

I have a <div> fixed on bottom with this css code

<div id="menu" style="background-color: rgb(255, 255, 255); bottom: 0px; position: fixed; left: 0px; width: 100%; box-shadow: 1px 1px 4px 3px rgba(0, 0, 0, 0.32); margin-top: 80px; overflow: hidden;">

</div>

The problem coming when on mobile i enter the text on the <input type="text">, my div cover my input and i need scroll the page for see what i'm writing.

How i can solve this problem?

Thank you!

It is not your problem at all, it depends on phone. If you try to scroll content, than on other phone you will get error. So, just leave it as is. — skobaljic, Jun 21 '16 at 08:02
http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Bob Brinks, Jun 21 '16 at 08:04

score 0 · Answer 1 · answered Jun 21 '16 at 08:11

You can try hiding it while focus an input. There is some tricks to do that it depends how your code is written and how your app works.

The easiest way, but maybe not the best is something like this

$(document).ready(function() {  

$("input").click(function(){
        $("#menu").hide();
            }).blur(function(){$("#menu").show();
});

But in this case it takes all inputs on page. It is just example solution that you can change and improve. In addition you should make it work only on mobiles. There is also a solution that you verify changes of mobile screen which indicates that user has keyboard displayed - and when the screen height changes you hide/show the covering div.

Div cover my input on mobile

1 Answers1