1

Lets imagine i have a simple page that looks like this: FIDDLE as you can see my Input fields are fixed at the bottom of the screen, i use this website on a Win10 TabletPc in tablet modus.

Now when ever i focus the input fields to type something in, the tablet keyboard pops up as it should and since my inputfields are at the bottom of the screen the keyboard will be shown over it which is not so problemmatic the real problem is that i cannot type anything inside those input fields aslong as the keyboard is over those inputs. I am not sure if this is a common problem because i couldnt find anything online. I also tried to scroll the inputs up when they are focused but unfortunately this doesnt fix it. It only works when i refocus the input element and the keyboard is not hideing it.

Any suggestions are appreciated.

HTML

<div id="mainBody">
//content....
</div>

<div id="footer">
<label>Input1<input type="number" /></label>
<br>
<br>
<label>Input2<input type="number" /></label>
<br>
<br>
<label>Input3<input type="number" /></label>
<br>
<br>
<label>Input4<input type="number" /></label>
</div>

CSS

#footer{
  position: fixed;
  bottom:0;
}
TheWandererr
  • 514
  • 1
  • 8
  • 34

1 Answers1

0

Try using z-index:1 or Make a button for the form and show it on the top of the screen so the user can add text to it normally

$(window).load(function() { 
    $('.buttonform').on('click touchstart', function() {
        $('#footer').show();
         $('#buttonform').hide();
    });
});

 <button type="button" class="buttonform">Complete form</button>


    <div id="footer" style="visibility:hidden">
    <label>Input1<input type="number" /></label>
    <br>
    <br>
    <label>Input2<input type="number" /></label>
    <br>
    <br>
    <label>Input3<input type="number" /></label>
    <br>
    <br>
    <label>Input4<input type="number" /></label>
    </div>
O.Rares
  • 1,031
  • 1
  • 16
  • 19
  • unfortunately the z-index attempt is not working for me. What excatly do you mean with the new button and show form ? could create a small example? – TheWandererr Apr 10 '17 at 08:59
  • @TheWandererr I updated my example,bootstrap use this ,you can try it and the page will look more professional – O.Rares Apr 10 '17 at 09:15