Responsive form - control the height of the text area
I have an HTML form :
<form method="post" action="#" class="cf">
<div class="left">
<label for="first-name">First Name</label>
<input type="text" name="first-name" placeholder="First Name" id="first-name" required />
<label for="last-name">Middle Name</label>
<input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
<label for="last-name">Last Name</label>
<input type="text" name="last-name" placeholder="Last Name" id="last-name" required />
</div>
<div class="right">
<label for="details">Details</label>
<textarea name="details" placeholder="Details" id="details" required></textarea>
</div>
<input type="submit" name="submit" value="Submit Form" />
</form>
And this is my CSS :
/* Clearfix */
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
form > * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
background: rgba(255, 0, 0, .2);
}
.right {
background: rgba(0, 255, 0, .2);
}
form {
background: #ccc;
}
input[type="text"],
textarea {
width: 100%;
border: none;
}
input[type="text"] {
margin-bottom: 10px;
}
label {
display: inline-block;
margin-bottom: 5px;
}
@media only screen and (min-width: 600px) {
form {
background: rgba(0, 0, 255, .3);
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
input[type="submit"] {
clear: both;
}
}
Fiddle
http://jsfiddle.net/gRRmh/
Basically there are three text input fields, one text area and one submit button (also like input type). When the breakpoint is reached, the form flows into a two column layout. This is the part that works.
The part that doesn't work is the height of the textbox. I want it to be the same height as the three input fields on the left.
Installing it on height: 100%;
doesn't work for two reasons:
- Consider the height of the mark. Of course, I could just give it a percentage height and subtract that value from the textarea's height (10% / 90%) ...
- ... but for this, one parent element requires a fixed height, so I need to specify the shape, eg. height 200 pixels. The problem is that I actually need to match the height of the left column manually, which is not really a good solution.
So what I'm really looking for is something like the following, just not nudging pixels by hand: (also with a fiddle if you like, but note: its a bit messy. Http://jsfiddle.net/mnBEh/1/ )
How to solve this problem?
source to share
Try it. It uses CSS tables, but I think it gets the result you are looking for by setting the textarea value to 100% height and then bypassing the height of its label. But for some reason the height is calculated correctly only in Chrome, even though other browsers supposedly support it. http://jsfiddle.net/73cyorL1/
CSS
.table {
display: table;
width: 100%;
}
.row {
display:table-row;
width: 100%;
}
.left {
background: red;
}
.right {
background: blue;
}
label {
display: block;
padding: 10px;
font-family: arial;
font-style: italic;
font-size: 0.75em;
line-height: 1em;
}
form {
background: grey;
}
input[type="text"], textarea {
width: 100%;
border: none;
background: #ccc;
font-family: arial;
padding: 10px;
box-sizing: border-box;
display: block;
}
input[type="text"]:focus, textarea:focus {
outline: 0;
background: #ddd;
}
input[type="submit"] {
display: block;
margin: 10px;
padding: 10px;
cursor: pointer;
}
@media only screen and (min-width: 600px) {
.left {
width: 50%;
height: 100%;
display: table-cell
}
.right {
width: 50%;
height: 100%;
display: table-cell;
overflow: hidden;
}
textarea {
height: calc(100% - 0.75em);
/* 100% fill height, minus height of details label */
}
}
HTML:
<form method="post" action="#" class="table">
<div class="row">
<div class="left">
<label for="first-name">First Name</label>
<input type="text" name="first-name" placeholder="First Name" id="first-name" required="required" />
<label for="last-name">Middle Name</label>
<input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
<label for="last-name">Last Name</label>
<input type="text" name="last-name" placeholder="Last Name" id="last-name" required="required" class="last" />
</div>
<div class="right">
<label for="details">Details</label>
<textarea name="details" placeholder="Details" id="details" required></textarea>
</div>
</div>
<input type="submit" name="submit" value="Submit Form" />
</form>
source to share