Setting height of textbox to height of label text

css, html, jquery

Solution

You could do it using jQuery.

$(document).ready(function() {
   var labelHeight = $('label').height();
   $('textarea').height(labelHeight);
});

Here is the JSFiddle example - http://jsfiddle.net/XrcLy/1/

Problem

Can someone provide me an example of how I can set the height of my textbox to fit the height of a label that accompanies it? As you can see, I have my label and textbox within a fieldset. The text for my label can be variable so I'm unsure if there are css properties to handle this or it must be set it dynamically. I should also mention that my labels are populated on the fly when the page loads. I'm using Asp.net. ``` <fieldset class="input"> <ol> <li> <asp:Label id="label1" AssociatedControlID="textField1" runat="server">Provide a brief description of the process used to build, monitor and maintain investment portfolios for this strategy.</asp:Label> <textarea ID="textField1" runat="server" cols="40" rows="4"></textarea> </li> <li> <asp:Label id="label2" AssociatedControlID="textField2" runat="server">What market anomaly or inefficiency are you trying to capture?</asp:Label> <textarea ID="textField2" runat="server" cols="40" rows="4"></textarea> </li> </ol> </fieldset> ``` ``` fieldset.input { float:none; clear:both; width:97%; border:1px solid #C0CED7; padding:0; } fieldset.input ol { list-style:none; padding: 1em 1em 0; } fieldset.input li { float:left; clear:left; width:100%; padding-bottom:1em; } fieldset.input label { float:left; width:15em; margin-right:3em; text-align:left; } ```

Original source