auto-size textbox

19 Oct 2006 4:08 PM

Jerry C

I have a text box on a asp.net web page. The text is from a dataset field.
The length of the text can be anywhere from 0 to 2000 chars. what is the best
way to resize the textbox to fit the text. I find some information about
using the graphics library. Is this the best way.

--
Jerry

20 Oct 2006 1:18 AM

Brennan Stehling

This is not something supported natively by ASP.NET, but you can use
CSS and Javascript to resize the TextBox. I am not sure you would want
to automatically resize the TextBox with every new letter entered into
the TextBox because that would make for a busy UI.

What you could do is define thresholds to resize. That way you can use
a class attribute to switch the size of the TextBox easily. First
thing you need to do is set the TextBox to Multiline mode. That makes
it use a TEXTAREA HTML element. Then you can use this CSS...

textarea.small {
width: 50px;
height: 40px;
}

textarea.medium {
width: 150px;
height: 80px;
}

textarea.large {
width: 300px;
height: 200px;
}

You can add as many sizes as you feel is reasonable.

You can have the TEXTAREA handle the onkeypress event to count the
number characters in the TextBox and switch the class reference as
appropriate.

Here is an example to do that...

http://brennan.offwhite.net/blog/2006/09/02/change-the-font-size-to-help-your-readers/

Brennan Stehling
http://brennan.offwhite.net/blog/

Jerry C wrote:
Show quoteHide quote

> I have a text box on a asp.net web page. The text is from a dataset field.
> The length of the text can be anywhere from 0 to 2000 chars. what is the best
> way to resize the textbox to fit the text. I find some information about
> using the graphics library. Is this the best way.
> --
> Jerry

20 Oct 2006 3:57 AM

Walter Wang [MSFT]

Hi Jerry,

This depends on what your requirement is:
1) Is your font used in the textbox fixed width?
2) Is your your textbox multiline or single line?
3) Is your text needs be wrapped or the width need to be adjusted too?

If your requirement is only to set the height of the textarea (multiline
textbox), you can do this using following javascript:

function ResizeTextArea(txtBox)
{
        nCols = txtBox.cols;
        sVal = txtBox.value;
        nVal = sVal.length;
        nRowCnt = 1;

        for (i=0;i<nVal;i++)
        {   if (sVal.charAt(i).charCodeAt(0) == 13) { nRowCnt +=1; } }

        if (nRowCnt < (nVal / nCols)) { nRowCnt = 1 + (nVal / nCols); }
        txtBox.rows = nRowCnt;
}

Then you can call this javascript using:

    protected void Button1_Click(object sender, EventArgs e)
    {
        TextBox1.Text = ...
        ClientScript.RegisterStartupScript(this.GetType(), "resizeTextBox",
"ResizeTextArea(form1.TextBox1)", true);
    }

Assume you have set following CSS rules and textbox set to use multiline
and no-wrap:

    <style type="text/css">
    textarea {
        overflow: scroll;
    }
    </style>

<asp:TextBox ID="TextBox1" Wrap="false" runat="server" Columns="40"
Rows="3" TextMode="MultiLine"></asp:TextBox>

Sincerely,
Walter Wang (waw***@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications. If you are using Outlook Express, please make sure you clear the
check box "Tools/Options/Read: Get 300 headers at a time" to see your reply
promptly.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

20 Oct 2006 12:49 PM

Jerry C

Walter, Brennan,

Thank you for your replys. Since I use dotnet all the time using Jave Script
does not enter my mind. These solutions look like just what I need

Thank you,

--
Jerry

Show quoteHide quote

"Walter Wang [MSFT]" wrote:

> Hi Jerry,
>
> This depends on what your requirement is:
> 1) Is your font used in the textbox fixed width?
> 2) Is your your textbox multiline or single line?
> 3) Is your text needs be wrapped or the width need to be adjusted too?
>
> If your requirement is only to set the height of the textarea (multiline
> textbox), you can do this using following javascript:
>
>   function ResizeTextArea(txtBox)
>   {
>         nCols = txtBox.cols;
>         sVal = txtBox.value;
>         nVal = sVal.length;
>         nRowCnt = 1;
>
>         for (i=0;i<nVal;i++)
>         {   if (sVal.charAt(i).charCodeAt(0) == 13) { nRowCnt +=1; } }
>
>         if (nRowCnt < (nVal / nCols)) { nRowCnt = 1 + (nVal / nCols); }
>         txtBox.rows = nRowCnt;
>   }
>
> Then you can call this javascript using:
>
>     protected void Button1_Click(object sender, EventArgs e)
>     {
>         TextBox1.Text = ...
>         ClientScript.RegisterStartupScript(this.GetType(), "resizeTextBox",
> "ResizeTextArea(form1.TextBox1)", true);
>     }
>
> Assume you have set following CSS rules and textbox set to use multiline
> and no-wrap:
>
>     <style type="text/css">
>     textarea {
>         overflow: scroll;
>     }
>     </style>
>
> <asp:TextBox ID="TextBox1" Wrap="false" runat="server" Columns="40"
> Rows="3" TextMode="MultiLine"></asp:TextBox>
>
> Sincerely,
> Walter Wang (waw***@online.microsoft.com, remove 'online.')
> Microsoft Online Community Support
>
> ==================================================
> Get notification to my posts through email? Please refer to
> http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
> ications. If you are using Outlook Express, please make sure you clear the
> check box "Tools/Options/Read: Get 300 headers at a time" to see your reply
> promptly.
>
> Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
> where an initial response from the community or a Microsoft Support
> Engineer within 1 business day is acceptable. Please note that each follow
> up response may take approximately 2 business days as the support
> professional working with you may need further investigation to reach the
> most efficient resolution. The offering is not appropriate for situations
> that require urgent, real-time or phone-based interactions or complex
> project analysis and dump analysis issues. Issues of this nature are best
> handled working with a dedicated Microsoft Support Engineer by contacting
> Microsoft Customer Support Services (CSS) at
> http://msdn.microsoft.com/subscriptions/support/default.aspx.
> ==================================================
>
> This posting is provided "AS IS" with no warranties, and confers no rights.
>
>

23 Oct 2006 1:49 AM

Walter Wang [MSFT]

Hi Jerry,

Thank you for the follow-up. Please feel free to try out the suggested
methods and let us know if you need further information on this post. Thank
you.

Regards,
Walter Wang (waw***@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.