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

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?

---

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.

---

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.

---

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

---

I realise that this is a old question, but for those people who come across it looking for how to style text boxes based on the MaxLength attribute I use the following CSS:

input[maxlength='2'] { width: 40px;}

If you have lots of text boxes with different MaxLengths, then this probably isn't going to be the solution for you. However if you want the presentation of a text box to match what is to be input into it, I think it's a good solution.

---

$(':input[maxlength]').each(function (i, e) {$(e).width(e.maxLength * 10)});

This is making an assumption that characters are roughly 10px. It works quite well for my needs.

---

I realise this is a very old post - here's my answer for future reference for others!

Use the Style property to set width to 100% instead of the width property on its own.

e.g.

<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 horizontal scroll-bars" 
    MaxLength="60"
    Style="Width: 100%"
  >
</asp:textbox>

This is tried and tested in a production environment I work on. It's simpler than using Javascript and works in the existing HTML.

As to exactly why this works, unfortunately I am short of knowledge.