locked
Autoresize the textbox or text area RRS feed

  • Question

  • User-571605279 posted

    Dear All,

    I have text area where I had applied wrapper and Jquery resizable ,
    But my client wants to get the text box height and width get increase automatically when the content get increase in it. 

    Can any one please help me how can I make it using Javascript

    Tuesday, April 3, 2018 4:46 AM

Answers

  • User-571605279 posted

    https://jsfiddle.net/jakecigar/Lhust6y0/15/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 4, 2018 1:11 PM

All replies

  • User177399542 posted

    Hi Beginer,

    Check this detailed example: http://www.codingfusion.com/Post/Automatically-Increase-height-of-multiline-texbox

    Tuesday, April 3, 2018 4:58 AM
  • User-571605279 posted

    Anuj,

    Thanks for your response,

    Could you please help me what's wrong in my below code , I followed the given url.

    <!DOCTYPE html>
    <html>
    <head>
    <title>autoresizing textarea</title>
    <style type="text/css">
           textarea
           {
               border: 2px solid #ccc;
               padding: 10px;
               vertical-align: top;
               width: 25%;
               resize: none;
           }
            
           .animated
           {
               -webkit-transition: height 0.2s;
               -moz-transition: height 0.2s;
               transition: height 0.2s;
           }
       </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.autosize.min.js"></script>
    <script type="text/javascript">
     $(function () {
                 $('.animated').autosize({ append: "\n" });
            });
    
    </script>
    </head>
    <body onload="init();">
    <textarea rows="1" style="height:1em;" id="text" cssclass="animated"></textarea>
    </body>
    </html>

    Tuesday, April 3, 2018 5:08 AM
  • User177399542 posted

    Have you included "jquery.autosize.min.js" into your project. If yes,Check its path.

    Tuesday, April 3, 2018 5:42 AM
  • User1400794712 posted

    Hi Beginer,

    First, please check your browser console, make sure there is no error message in it.

    Second, if you want to use class for textarea, it should be class not cssclass. asp:textarea needs cssclass. And modify the js code to:

    <textarea rows="1" style="height:1em;" id="text" class="animated"></textarea>
    <script type="text/javascript"> $(function () { autosize($('.animated')); }); </script>

    Best Regards,

    Daisy

    Wednesday, April 4, 2018 10:13 AM
  • User-571605279 posted

    https://jsfiddle.net/jakecigar/Lhust6y0/15/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 4, 2018 1:11 PM