Menu
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.
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>
248
Use android:windowSoftInputMode="adjustResize". KeyboardAvoidingView and other keyboard-related components don't work quite well if you have "adjustPan" set for your android:windowSoftInputMode in AndroidManifest. xml . Instead, you should use "adjustResize" and have a wonderful life.
Here pass HIDE_IMPLICIT_ONLY at the position of showFlag and 0 at the position of hiddenFlag . It will forcefully close soft Keyboard.
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
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
