Databases
StackOverflow2013
Postsdbo
POResponsive form - controlling height of a textarea
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive form - controlling height of a textarea
    text
    copied!<p>I've got this <strong>HTML</strong> form: </p> <pre><code>&lt;form method="post" action="#" class="cf"&gt; &lt;div class="left"&gt; &lt;label for="first-name"&gt;First Name&lt;/label&gt; &lt;input type="text" name="first-name" placeholder="First Name" id="first-name" required /&gt; &lt;label for="last-name"&gt;Middle Name&lt;/label&gt; &lt;input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" /&gt; &lt;label for="last-name"&gt;Last Name&lt;/label&gt; &lt;input type="text" name="last-name" placeholder="Last Name" id="last-name" required /&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;label for="details"&gt;Details&lt;/label&gt; &lt;textarea name="details" placeholder="Details" id="details" required&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;input type="submit" name="submit" value="Submit Form" /&gt; &lt;/form&gt; </code></pre> <p>And this is my <strong>CSS</strong>: </p> <pre><code>/* Clearfix */ .cf:before,.cf:after { content: " "; display: table; } .cf:after { clear: both; } form &gt; * { -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; } } </code></pre> <p><strong>Fiddle</strong><br> <a href="http://jsfiddle.net/gRRmh/" rel="nofollow noreferrer">http://jsfiddle.net/gRRmh/</a></p> <p>Basically it's three text input fields, one textarea and one submit button (aka input type submit). When the breakpoint is reached, the form flows into a two column layout. That's the part that is working. </p> <p>The part that is not working is the height of the textarea. I want it to be the same height as the three input fields on the left.<br> Setting it to <code>height: 100%;</code> does not work for two reasons: </p> <ul> <li>The height of the label needs to be taken into account. Sure I could just give it a height in percentages and subtract that value from the textarea's height (10% / 90%) ...</li> <li>...but for this to work, one parent elements needs a fixed height, so I need to give the form e.g. a height of 200px. The problem with that is I actually need to match the height of the left column by hand which isn't really a good solution.</li> </ul> <p>So what I am actually looking for is something like the following, just without nudging pixels by hand: <img src="https://i.stack.imgur.com/SrXs4.png" alt="enter image description here"> (also with fiddle if you want, but please note: Its a bit messy. <a href="http://jsfiddle.net/mnBEh/1/" rel="nofollow noreferrer">http://jsfiddle.net/mnBEh/1/</a>)</p> <p>How to solve this problem?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload