Giving Height in percentage squeezes input fields when soft keyboard opens in android tablets

Question

I have an issue in android tablets with a page having input fields. Whenever somebody tape on the input field to enter something soft keyboard opens an the input fields look squeezed as can be seen in the image. i am using below css:

 html,body{
    height:100%;
  }
  .form{
   height:100%;
  }
  .container{
    height:100%;
  }

Answer 1

The problem is that you are setting the dimensions relative to the window size; when the soft keyboard opens, the window is resized. So if your page is always relative, then it will cause problems when it gets too small.

Maybe try to add a min-height to the body so that its children won't get affected if window gets too small:

html,body{
   min-height: 300px;
   height: 100%; 
}