Geek Answers Handbook

Set the height of the text box to the height of the label text

Can someone provide me an example of how I can set the height of my text box so that it matches the height of the label that accompanies it? As you can see, I have my shortcut and text field in the field set. The text for my shortcut may be variable, so I'm not sure if there are css properties to handle it or if it needs to be set dynamically. I should also mention that my shortcuts fill on the fly when the page loads. I am using Asp.net.

http://postimg.org/image/am7xxwr1v/

<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; }
+4
source share
1 answer

You can do this with jQuery.

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

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

+4
source

More articles:


All Articles