Set textbox size as per data contained in it

Question

1.00/5 (3 votes)

See more:

Hello,

I want to set a size of textbox according to the text contain in it. I know it can be implemented using javascript called on keyup event of textbox. but in my case I selecting a data from database so i am not going to write into it. the caode is on .ascx.cs page so I do not want to use javascript here. please help

how to set max width of label and height is autosize as per text but width should be in limit

What I have tried:

<asp:TextBox ID="post" runat="server"  CommandArgument="<%#Container.DataItemIndex %>"  Text=' <%#DataBinder.Eval(Container.DataItem, "Message")%>' Font-Size="Smaller" TextMode="MultiLine"  Enabled="true" OnLoad="resizeTextBox(this)"   OnCommand="txtSuggestion_Command"  Width="290px"  ><%--onkeyup="AutoGrowTextArea(this)"   --%>

this is textbox in .ascx page

<script type = "text/javascript">
        function resizeTextBox(txt) {
            txt.style.height = "1px";
            txt.style.height = (1 + txt.scrollHeight) + "px";
        }
    </script>m

this is script for resize a textbox which is in masterpage as to write it in .ascx does not make use.

Posted 10-May-16 4:29am

Kishor-KW

Updated 10-May-16 21:28pm

Santosh Kokatnur

v4

Add a Solution

Comments

Suvendu Shekhar Giri 10-May-16 10:34am

The purpose of the "What I have tried" section is let us know, what have you tried so far and where you are stuck so that we can help you out. It doesn't make any sense to copy-paste the same text twice.
Please share the relevant code, you have tried so far.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2016-05-10T04:50:00

This is a wrong idea. "Text box" is rendered as HTML input element or textarea. If it is always not editable, it would be pointless to use this class, but if it is editable, the user can put any text there, so, no matter how you manipulate the size, you cannot possibly fit all the text. Besides, it's nearly impossible to evaluate the text bounds correctly. Also, don't forget that textarea can optionally wrap words, to show a single line of text in several lines, depending on current control width. So, my advice is: choose the size of the control defined by your page layout, not text value of it. Use scroll bars instead, when required.

And for all non-editable HTML element, this is already done: the size is controlled by the inner content of the element, unless you prevent this default behavior with some unreasonable styles, so just don't prevent it.

—SA

OriginalGriff · Answer 2 · 2016-05-10T04:54:00

Solution 2

You don't have a lot of choice but to use javascript for this: you don't know the size of the text until it's actually rendered at the client browser because it will depend on the font used - and while you can suggest a font unless it is installed on the client the browser will substitute, and you can't tell at the server side if this is going to happen. And the user is at liberty to use system wide text magnification as well as changing the default font size in his browser.
You can use C# and MeasureString assuming a particular font and text magnification at the client, but there is no guarantee at all that the displayed result will fit.

Posted 10-May-16 4:54am

OriginalGriff

Comments

Suvendu Shekhar Giri 10-May-16 11:06am

5Ed !

Sergey Alexandrovich Kryukov 10-May-16 11:14am

Just a note: MeasureString is very inaccurate. However, which "MeasureString" do you mean? I know only System.Drawing.MeasureString. How would you use it for a Web application?
—SA

F-ES Sitecore 11-May-16 5:23am

Just out of interest :)

Text1.CssClass = Text2.CssClass = "mytext";
Text1.Text = "Hello";
Text2.Text = "Hello world!!!";

Bitmap b = new Bitmap(10, 10);
Graphics g = Graphics.FromImage(b);

// this matches the css attached to "mytext"
Font f = new Font(new FontFamily("Verdana"), 10);

SizeF s = g.MeasureString(Text1.Text, f);
Text1.Style["width"] = s.Width.ToString() + "px;";

s = g.MeasureString(Text2.Text, f);
Text2.Style["width"] = s.Width.ToString() + "px;";

As said though, an approximation at best, it doesn't take into effect the width of the texbox that the browser might use, it forces you to use px rather than em which causes a whole host of other issues. Just a bad idea all round, and the wrong way to approach web design. Though I dare say the OP doesn't really care.

Sergey Alexandrovich Kryukov 11-May-16 10:34am

The real problem is hinting. On CodeProject, I saw articles with better way of measuring string, still using .NET FCL, but I tested some a while ago, found then inaccurate, too. The string appears a bit wider in fact...
—SA

F-ES Sitecore 11-May-16 11:39am

I agree, it's never 100% accurate, it's always slightly off for some reason or other, and if something isn't 100% accurate there is no point in doing it IMO. I just gave that as an example of how something like that can be used server-side to estimate the width of client-side text.

Kishor-KW 11-May-16 3:20am

how to set max width of label and height is autosize as per text but width should be in limit

F-ES Sitecore 11-May-16 4:50am

You're just re-asking the question, the answer is that you can't. You might not like that answer, but re-asking isn't going to change it.

Kishor-KW 11-May-16 5:22am

means we can't fix out the width of label? not even using css or javascript?