How to adapt the size of a Textbox (MultiLine) to a text in ASP .NET C#?

Question

I have an .aspx form and in the Page_Load event I assign several values to controls (Textbox, DropdownList, etc.) from the database, however I have a Textbox control where it is possible that the text is very large or very small, it is here where I would like to know if it is possible to make the textbox size dynamic.

When the form finishes loading the Textbox control it is displayed like this:.

But I would like to visualize it like this (everything depends on the text):

Textbox Code:

<asp:TextBox runat="server" ID="txt" TextMode="MultiLine" Height="80px" ReadOnly="true" CssClass="form-control"></asp:TextBox>

I am using .NET Framework 4.5.2, I am not sure if I should use any functionality from jQuery and if so, how would it be done?

https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.textbox.textmode?view=netframework-4.8 — JohnPete22, Nov 06 '19 at 15:57
That should render in the browser as a textarea if I recall... See this answer for dynamically finding the height... https://stackoverflow.com/a/995374/3739842 — Sean T, Nov 06 '19 at 16:06
Does this answer your question? [Textarea to resize based on content length](https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length) — Sean T, Nov 06 '19 at 16:07
@Sean T This works but I have to write about the textbox so that it changes the size ... The control has the property ReadOnly="true", therefore when I fear to load the form it must adapt automatically, I am seeing what I can do... — Julián, Nov 06 '19 at 16:14
you know how to adapt the size when finish loading the form using the js code? — Julián, Nov 06 '19 at 16:21
@Julián I've added an answer that includes both a pure javascript version and a version if you're using jQuery library — Sean T, Nov 06 '19 at 16:35

Sean T · Accepted Answer · 2019-11-06T17:18:56.910

1

You can do this with Javascript or Jquery on page load quite easily.

Jquery:

$(function(){//executes when dom is ready

    var textAreaAdjust = function(control) {//function to set the height
        $(control).height(1);
        $(control).height($(control).prop('scrollHeight'));
    }

    textAreaAdjust($('#txt'));// call the function passing the textarea control in
});

Javascript:

document.addEventListener("DOMContentLoaded", function () {

        var textAreaAdjust = function(control){//funciton to measure and set height
            control.style.height = "1px";
            control.style.height = (25+control.scrollHeight)+"px";
        };

        var textControl = document.getElementById("txt");//get the textarea
        textAreaAdjust(textControl);//pass it into the function

});

Credit to this answer

edited Nov 06 '19 at 17:18

answered Nov 06 '19 at 16:23

Sean T

2,414
2
17
23

It shows it totally minimized https://i.stack.imgur.com/VLcjk.png but when I call the function from the browser console it works, how strange – Julián Nov 06 '19 at 17:05
@Julián which version? javascript or jquery? I've changed the javascript event - that should fix it – Sean T Nov 06 '19 at 17:06
i using the version 3.3.1 – Julián Nov 06 '19 at 17:09
Sorry I meant which solution, I've posted 2 code snippets - which one are you using? – Sean T Nov 06 '19 at 17:09
I'm using both, but they say scrollHeight is zero, that's why it minimizes it – Julián Nov 06 '19 at 19:31
Finally it worked, the error was mine, it turns out that the textbox is in a div that has a collapse behavior, it is for this reason that when the control was hidden the scrollHeight was always at zero but when it was displayed it showed the real value. Now I control it through a click event. Thank you very much for your help! – Julián Nov 06 '19 at 19:53
@Julián Glad you figured it out – Sean T Nov 07 '19 at 09:51

score 0 · Answer 2 · answered Nov 06 '19 at 20:23

You could use a literal control

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

or an html div with runat="server" added.

<div id="specialDiv" runat="server"></div>

c#

specialDiv.InnerText = "asdfasdf...etc";

Note, if you use CssClass="form-control", you might have to update the css by setting height to auto, instead of the preset/hard-coded height.

How to adapt the size of a Textbox (MultiLine) to a text in ASP .NET C#?

2 Answers2