Menu
I've been playing with responsive layout and forms. I'm quite pleased with what I have so far: it works nicely from mobile to wide screen; see below. (Only tested on firefox/chrome so far.)
At the 800px width it moves the message block to the right column. The problem is that this is done with a float:right and position:absolute, which means its height stops affecting the surrounding div. So the message box sticks out.
I can (and do) improve this by adding the height:220px, so that it looks okay by default. But someone can still resize the textarea outside of the surrounding div. I find resizing textareas a wonderful feature, so don't want to disallow the resizing. And overflow:auto is not a solution: the user would just be exchanging scrollbars on the textarea for scrollbars on the div!
So, is there any way to have the outer div resize to always contain the textarea?
<html>
<head>
<style>
body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;}
#contactform {margin: 0 auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;}
#contactform .required:after{color:red;content:" *";}
#contactform label {display:block;}
#contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;}
#contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;}
@media (min-width: 800px) {
#contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/}
#formsecondhalf {top:0;right:6px;position:absolute;}
#contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;}
#contactform input,textarea {width: 300px;min-width:300px;max-width:300px;}
}
</style>
</head>
<body>
<div id="contactform">
<form action="" method="post">
<label for="name" class="required">Name:</label>
<input id="name">
<br/>
<label for="email" class="required">Email:</label>
<input id="email">
<br/>
<div id="formsecondhalf">
<label for="message">Message:</label>
<textarea id="message"></textarea>
</div>
<br />
<input type="submit" value="SEND">
</form>
</div>
</body>
</html>
458
Use float:right instead of absolutely positioning the right area. And then wrap a div around the other fields, float that left, and then just clear it all.
Example
<html>
<head>
<style>
body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;}
#contactform {margin: 0 auto;overflow:auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;}
#contactform .required:after{color:red;content:" *";}
#contactform label {display:block;}
#contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;}
#contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;}
@media (min-width: 800px) {
#contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/}
#formsecondhalf {float:right;}
#formfirsthalf {float:left;}
#contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;}
#contactform input,textarea {width: 300px;min-width:300px;max-width:300px;}
}
</style>
</head>
<body>
<div id="contactform">
<div id="formfirsthalf">
<form action="" method="post">
<label for="name" class="required">Name:</label>
<input id="name">
<br/>
<label for="email" class="required">Email:</label>
<input id="email">
<br/>
</div>
<div id="formsecondhalf">
<label for="message">Message:</label>
<textarea id="message"></textarea>
</div>
<br />
<input type="submit" value="SEND">
</form>
</div>
</body>
</html>
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
