locked
Auto Adjust heigth of TextAreaFor - EditorFor RRS feed

  • Question

  • User982203039 posted

    Somewhere I thought I saw a way with Java to auto expand a TextAreaFor and EditorFor boxes? Can someone show me an example or how to do this. I want the box to grow or shrink depending on the amount of text.

    Thanks!

    EB

    Tuesday, September 3, 2019 1:45 PM

Answers

  • User-719153870 posted

    Hi Baze72,

    Baze72

    Will this also work on the height?

    Of cource, we can resize textarea with the similar way. But i won't suggest you to change them(width and height) both and the same time.

    You can refer to Textarea auto-expand, or you can refer to below one i provide.

    Baze72

    Also what about just display the text OR edit the existing text - can this also be used for expanding as needed?

    This can also be achieved with the similar way with a little trick.

    After you fill the textarea, in the page's onload event, resize textarea's size.

    Please refer to below code:

    .ASPX:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript"> 
            function adjust(k) {
                k.size = (k.value.length > 4 ? k.value.length : 4);
            }
            function textAreaAdjust(o) {
                o.style.height = "auto";
                o.style.height = o.scrollHeight + "px";
            }
            function refresh() {
                var txta = document.getElementById("txta");
                if (txta.value.length>0) {
                    textAreaAdjust(txta);
                }
                else { }
            }
        </script>
    </head>
    <body onload="refresh()">
        <form id="form1" runat="server">
            <div>
                <textarea  onkeyup="textAreaAdjust(this)" runat="server" id="txta" style="overflow:hidden"></textarea><br />
                <input type="text" id="txt" runat="server" size="4" onkeyup="return adjust(this);" /><br />
                <asp:Button ID="Button1" runat="server" Text="Show Text" OnClick="Button1_Click" />
            </div>
        </form>
    </body>
    </html>

    .CS:

        protected void Button1_Click(object sender, EventArgs e)
            {
                txt.Value = "123123123123123123123123";
                txta.Value = "2222222222222222222222222222222222222222222222222222222222";
            }

    Below is the result of this demo:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 5, 2019 6:19 AM

All replies

  • User-719153870 posted

    Hi Baze72,

    I want the box to grow or shrink depending on the amount of text.

    For a textbox like control, you will only need to add a onkeyup event to it and change its width dynamically.

    Please refer to below code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript"> 
            function adjust(k) {
                k.size = (k.value.length > 4 ? k.value.length : 4);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input type="text" id="txt" size="4" onkeyup="return adjust(this);" />
            </div>
        </form>
    </body>
    </html>

    The result:

    Best Regard,

    Yang Shen

    Wednesday, September 4, 2019 6:43 AM
  • User982203039 posted

    Great. 2 questions. Will this also work on the height?

    Also what about just display the text OR edit the existing text - can this also be used for expanding as needed?

    Thanks again,

    EB

    Wednesday, September 4, 2019 8:24 PM
  • User-857013053 posted

    Follow this link: http://www.jacklmoore.com/autosize/

    Thursday, September 5, 2019 5:25 AM
  • User-719153870 posted

    Hi Baze72,

    Baze72

    Will this also work on the height?

    Of cource, we can resize textarea with the similar way. But i won't suggest you to change them(width and height) both and the same time.

    You can refer to Textarea auto-expand, or you can refer to below one i provide.

    Baze72

    Also what about just display the text OR edit the existing text - can this also be used for expanding as needed?

    This can also be achieved with the similar way with a little trick.

    After you fill the textarea, in the page's onload event, resize textarea's size.

    Please refer to below code:

    .ASPX:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript"> 
            function adjust(k) {
                k.size = (k.value.length > 4 ? k.value.length : 4);
            }
            function textAreaAdjust(o) {
                o.style.height = "auto";
                o.style.height = o.scrollHeight + "px";
            }
            function refresh() {
                var txta = document.getElementById("txta");
                if (txta.value.length>0) {
                    textAreaAdjust(txta);
                }
                else { }
            }
        </script>
    </head>
    <body onload="refresh()">
        <form id="form1" runat="server">
            <div>
                <textarea  onkeyup="textAreaAdjust(this)" runat="server" id="txta" style="overflow:hidden"></textarea><br />
                <input type="text" id="txt" runat="server" size="4" onkeyup="return adjust(this);" /><br />
                <asp:Button ID="Button1" runat="server" Text="Show Text" OnClick="Button1_Click" />
            </div>
        </form>
    </body>
    </html>

    .CS:

        protected void Button1_Click(object sender, EventArgs e)
            {
                txt.Value = "123123123123123123123123";
                txta.Value = "2222222222222222222222222222222222222222222222222222222222";
            }

    Below is the result of this demo:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 5, 2019 6:19 AM