Geek Answers Handbook

How to set textbox width the same way as MaxLength in ASP.NET

Is there a way to limit the width of the text box to the MaxLength property? In my case, right now the text box control is placed in a table cell, as in this fragment:

<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 that I should not use HTML tables to control the layout ... by another subject for sure), but is there a way to limit the actual width to the maximum number of characters allowed in the printed field?

+5
source share
6 answers

, . , Javascript (jQuery). :

  • (: -1000 - )
  • , /,
  • 60 .
  • jQuery

, , Facebook, : http://james.padolsey.com/javascript/jquery-plugin-autoresize/

( , .)

, , .

+3

( Page_Load) :

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

, , . , ControlCollection TextBox, MaxLength Width, , MaxLength, Widths .

+3

HTML cols

,

     <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>

, , . , MaxLength cols,

0

, , , , MaxLength, CSS:

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

MaxLengths, , , . , , , , .

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

, 10px. .

0

, - !

Style 100% width.

.

<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 has been tested and verified in the production environment I'm working on. This is simpler than using Javascript and works in existing HTML.

As for exactly why this works, unfortunately, I lack knowledge.

0
source

More articles:


All Articles