title: Can't enter text into HTML input field on Android mobile website, though input gets focus
body: <p>I am trying to view my website in the default browser that comes with my Samsung Galaxy Android phone, but it isn't working properly. I can't seem to enter text into a popup login form. When I try to enter my username the HTML input gets focus and the predictive search starts to work, but it won't enter any text into the input field. I can however enter text successfully into other form inputs that are on my page (these forms are not in popup divs).</p>
  
  <p>I'm guessing it has something to do with the fact that my form is in a absolute positioned div that appears when the user clicks on the login button. </p>
  
  <p>A couple of my colleagues have tried the page on their android phones and are able to enter text as they should, so I think this is a OS/Browser specific problem. I'm running Android 2.3.3 and using the default browser that comes with that.</p>
  
  <p>This is the css for the the login div and form inputs:</p>
  
  <pre><code>.loginPanel{z-index:2000;width:341px;border-bottom-left-radius:3px;border-bottom-right-   radius:3px;background:#3DB44A;position:absolute;clear:left;margin:0 0 0     0;top:57px;display:none;padding:5px 0 0 0;}
  
  .loginPanel input[type=text]{width:280px;height:40px;margin:0 auto;display:block;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;font:bold 12px Arial;color:#353535;padding:0 10px;}  
  </code></pre>
  
  <p>And here is the HTML</p>
  
  <pre><code>&lt;div class="loginPanel" style="margin-left: -246px; display: block;"&gt;
  &lt;form id="user_form_login" class="global_form_box" enctype="application/x-www-form-urlencoded" action="/login" method="post"&gt;
  &lt;div class="close"&gt;
  &lt;a id="login-close" href="#"&gt;
  &lt;img alt="" src="themes/network90v2/landing_images/close.png"&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;
  &lt;input id="email" type="text" placeholder="Email" name="email"&gt;
  &lt;/div&gt;
  &lt;div id="username-required" class="form-label-required"&gt;
  &lt;span class="form-block-required"&gt;email is required&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="username-invalid" class="form-label-required"&gt;
  &lt;span class="form-block-required"&gt;email is not valid&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;
  &lt;input id="password" type="password" placeholder="Password" name="password"&gt;
  &lt;/div&gt;
  &lt;div id="password-required" class="form-label-required"&gt;
  &lt;span class="form-block-required"&gt;password is required&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="clear forgotten"&gt;
  &lt;span&gt;
  &lt;a href="/user/auth/forgot"&gt;Forgot Password?&lt;/a&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="submit-top"&gt;&lt;/div&gt;
  &lt;div class="remember submitMain"&gt;
  &lt;input id="login-submit" type="submit" value="Login"&gt;
  &lt;input id="remember" type="checkbox" name="remember" value="1" tabindex="4"&gt;
  </code></pre>
  
  <p>Remember Me
      
      
      
      </p>
  
  <p>I'm hoping that this can be fixed using CSS. If anyone has a solution/ had the same problem, I would really appreciate your help. </p>
  
  <p>PS I would really prefer to keep the login form as a popup, so Ideally any solutions will allow me to do this.</p>