Disable resize of Multiline TextBox and size should grow when typing using JavaScript in ASP.Net

micah

SOLVED CLOSED ACTIVE ANSWERED
User: micah
Posted: on May 18, 2017 03:01 AM
Forum: JavaScript
Answer: 1
Views: 6750
Sample Code: Download

I want to make textbox expand while typing also to remove the drag expansion inside the textbox to avoid users dragging and expaning the textbox let the textbox expand while typing.

<%--Modal 2 Start--%>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="H1">
                        Details</h4>
            </div>
            <div class="modal-header">
                <asp:TextBox ID="TextBox1" runat="server" CssClass=" form-control" placeholder="Comment"></asp:TextBox></div>
            <div id="modal1body" class="modal-body">
                <div class="tblCustomer">
                    <div>
                        <div class="pull-left " style="margin-top: 2px">
                            <span><span class="name" style="font-family: Arial, Helvetica, sans-serif; font-weight: bold">
                                <%# Eval("fName") %></span>
                                <asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("PROFILEPHOTOS/{0}",Eval("FImageName").ToString()) %>'
                                    class="image media-object img-rounded animated fadeInDown" Style="width: 45px;
                                    height: 45px;" />
                            </span><b /><span class="username">
                                <%# Eval("UserName") %></span><br />
                            <span class="postdate" style="font-family: Arial, Helvetica, sans-serif; font-weight: normal;
                                color: #C0C0C0">
                                <%# Eval("PostDate")%></span><br />
                        </div>
                        <div class="clearfix">
                        </div>
                        <div class="" style="margin-bottom: 4px">
                        </div>
                        <span class="content" style="font-family: Arial, Helvetica, sans-serif; font-weight: normal">
                            <%# Eval("Content") %></span>
                        <div class="clearfix">
                        </div>
                        <span>
                            <asp:Image ID="Image2" runat="server" ImageUrl='<%# String.Format("UserImage/{0}",Eval("ImageName").ToString()) %>'
                                class="image2 media-object img-rounded animated fadeInDown" Style="width: 30%;
                                height: 30%;" />
                        </span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <span>
                    <asp:LinkButton ID="LinkButton9" runat="server" CssClass="btn btn-primary btn-lg">
                        <asp:Label ID="Label26" runat="server" Text="Submit"></asp:Label>
                    </asp:LinkButton></span></div>
        </div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on May 18, 2017 04:04 AM
Modified: on Jan 16, 2018 02:52 AM
Report

Hi micah,

Refer below sample code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        textarea
        {
            overflow: hidden;
            resize: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var textarea = document.getElementById("comments");
            textarea.oninput = function () {
                textarea.style.height = "";
                textarea.style.height = Math.min(textarea.scrollHeight, 300) + "px";
            };
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <textarea name="comments" rows="1" cols="20" id="comments"></textarea>
    </div>
    </form>
</body>
</html>

Demo

For textbox refer below code for your reference

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        textarea
        {
            overflow: hidden;
            resize: none;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var textarea = document.getElementById("textComment");
            textarea.oninput = function () {
                textarea.style.height = "";
                textarea.style.height = Math.min(textarea.scrollHeight, 300) + "px";
            };
        }
     
    </script>
</head>
<body>
    <form id="form2" runat="server">
    <div>        
        <asp:TextBox ID="textComment" runat="server" TextMode="MultiLine"></asp:TextBox>
    </div>
    </form>
</body>
</html>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Disable resize of Multiline TextBox and size should grow when typing using JavaScript in ASP.Net

Company

Explore

Follow us

Contact Us