How to set width of textbox to be same as MaxLength in ASP.NET

Question

Is there a way I can limit the width of a textbox to be equal to the MaxLength property? In my case right now, the textbox control is placed in a table cell as in this snippet:

<td class=TDSmallerBold style="width:90%">
        <asp:textbox id="txtTitle" runat="server"
            CausesValidation="true"
            Text="Type a title here..be concise but descriptive. Include price."
            ToolTip="Describe the item with a short pithy title (most important keywords first). Include the price. The title you provide here will be the primary text found by search engines that index Zipeee content." 
            MaxLength="60"
            Width="100%">
        </asp:textbox>

(I know I should not use HTML tables to control layout..another subject for sure) but is there a way to constrain the actual width to the max number of characters allowed in the typed box?

Answer 1

You could set it from code (called in your Page_Load) as such:

 txtTitle.Width = new Unit(txtTitle.MaxLength, UnitType.Em);

Our system is database driven and we have a meta data table that stores a length property for each variable. I personally used the meta data by iterating over the ControlCollection and for each TextBox item, pulling the length of the variable's meta data and then assigning it to MaxLength and to Width though if you already have MaxLength set, you could have it do Widths in this manner.

Answer 2

It won't be precise, because characters can vary in width. But if you were really serious about this, you could do it with a bit of Javascript (jQuery). The steps would be:

• Create a span offscreen (top:-1000px or something)
• Make sure the span has the same styles/classes as your text box
• Fill the span with 60 characters
• Use jQuery to measure the width of the span
• Apply that width to the text box

It's a technique similar to the auto-expanding textareas you see on Facebook and such: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

(In this case, you are doing it horizontally instead of vertically.)

If you need real code, let me know, I'll do my best.