Login/Register
Preventing Android Keyboard from pushing layout
Asked Answered
Solved androidhtmlcsstwitter-bootstraptextarea
I

3

10

I created a form using bootstrap, css, and html.

However when I click on the text area on an android phone(that is, when it comes into focus), the bottom half of the textarea changes color.

I don't understand why its turning white. By the way: It works fine on a PC.

Normal Bottom half is white

My css Code:

    .container-fluid{
       background-color: #EF4247;
     border-color: #EF4247;
     }
form {
            height: 100%;
        width: 100%;
        padding: 50;
           background-color: #EF4247;
     border-color: #EF4247;
    text-align: center;

    margin: 0;
    }


h1{
text-align:center;
}

textarea{ width:200px;
}

.form-horizontal .control-group {
  margin-bottom: 20px;
}

My HTML code:

    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


     </head>
<body>
<div class="container-fluid">
<h1>SEND ME SOME MAIL</h1>
<form class="form-horizontal" action="mail.php" method="post" >
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email" name="subject">
    </div>
  </div>
  <div class="control-group">
  <label class="control-label" for="textarea">Text Area</label>
  <div class="controls">                     
    <textarea id="textarea"  rows="10" name="message" placeholder="Enter your message here:"></textarea>
  </div>
</div>
<button type="submit" class="btn">Submit</button>

</form>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="fitter-happier-text.js"></script>
    <script type="text/javascript"></script>
    </div>
</body>
</html>
Incest answered 3/11, 2014 at 6:0 Comment(1)
Can you put the background colour on the body instead of the form? If so then it could be a workaround. – Mote
M
3

I believe the underlying issue in this particular example is that the behaviour of the bootstrap container-fluid CSS style appears to be incompatible with your desired effect on mobile devices.

My answer to this is merely encapsulate your form with a new block element and set your background on that. Then set min-height:100% on this new block container, as well as the <html> and <body> elements.

Something like this:

html, body {
  min-height:100%;height:100%;
}
.red-background-not-on-body-or-html {
  background-color: #EF4247;    
  min-height:100%;
}

And html like this:

<body>
  <div class="red-background-not-on-body-or-html">
     <div class="container-fluid">
        <!-- FORM HERE -->
     </div>
  </div>
</body>

As far as your example goes, you could also just put the background-color attribute on the <body> or <html> tags themselves.

Otherwise, if you still require that the background respect the .container-fluid CSS logic, then you could try a hack with media queries for handheld devices but it could get messy.

You could also try re-ordering so that the form is outside the fluid logic then add min-height:100% to the form.

JSBin to illustrate

Mote answered 3/11, 2014 at 8:10 Comment(2)
Doing that makes the web page look funny on a PC. prasanthlouis.com/index1.html However the issue is fixed when using an android phone. – Incest
Edited my answer with added width/height attributes. I think this will still be ok on mobile; but haven't tested it. – Mote
I
1

I know this is very old post, but anyway here what you can do.

body {
  position: absolute;
}
Involution answered 25/10, 2018 at 6:21 Comment(0)
C
0

I delay the focus:

// If the form has the focus the keyboard moves the layout
setTimeout(() => this.focus(0), 1000);
Capet answered 16/3, 2021 at 12:19 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.