Preventing Android key presses on the keyboard
I created a form using bootstrap, css and html.
However, when I click on the text area on my Android phone (that is, when it gets focus), the bottom half of the text area changes color.
I don't understand why he turned white. By the way: it works great on PC.
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>
source to share
I believe the main problem with this particular example is that the bootstrap container-fluid
CSS styling behavior is inconsistent with your desired effect on mobile devices.
My answer to this question is simply to encapsulate your form with a new block element and set your background for that. Then install min-height:100%
in this new container the block as well as the <html>
and elements <body>
.
Something like that:
html, body {
min-height:100%;height:100%;
}
.red-background-not-on-body-or-html {
background-color: #EF4247;
min-height:100%;
}
And the html is like this:
<body>
<div class="red-background-not-on-body-or-html">
<div class="container-fluid">
<!-- FORM HERE -->
</div>
</div>
</body>
As for your example, you can also just put the attribute background-color
in tags <body>
or <html>
.
Otherwise, if you still require the background to respect the .container-fluid
CSS logic , you can try hacking media queries for handheld devices, but this can get messy.
You can also try reordering so that the form is outside the fluid logic and then add min-height:100%
to the form.
source to share