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

I use the HTML property cols

So for your example I would use

     <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="Blah Blah I don't like horizotal scroll-bars" 
        MaxLength="60"
        Width="100%"
         Cols="60" 
      >
    </asp:textbox>

---

I have never tried this but i wonder if there is a way to tie both together. So setting MaxLength also sets to cols, would be an interesting exercise

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.