How to auto resize the JHTML text area based on content height

Question

By default all text area are given a fixed height in main css file.I have created a jHTMLArea control and when user provide a huge value, we need to display the entire content by resizing the JHTML iframe.Currently the below code gives user the option to resize and view the data but I want the entire jHTMLtext area to auto resize based on content height. Kindly help.

  $(document).ready(function () {
         $(".txtContentDesc").htmlarea({
             loaded: function () {
                 this.iframe[0].contentWindow.focus(); 
                 var elemId = $(this.textarea).attr("id");        

                 $(this.editor).blur(function (event) {
                     return captureJHtmlContentTextareaonchange(elemId);
                 });

             }            
         }).parent().resizable({ alsoResize: $('.jHtmlArea ').find('iframe') });
     });

Is there a way to autosize the jHTMLArea based on the content. — psobhan, Jul 08 '16 at 07:01

score 1 · Answer 1 · answered Jul 08 '16 at 11:36

Here, I am taking the height of contents inside iframe and updating it on loading the jHTMLArea.

  $(".txtContentDesc").htmlarea({

        loaded: function () {

            var elemId = $(this.textarea).attr("id");              
            var height = $("#" + elemId + "").prev().find('iframe').contents().height();
            $("#" + elemId + "").prev().css("height", height + "px");            
            $("#" + elemId + "").prev().find('iframe').css("height", height + "px");
            $("#" + elemId + "").prev().find('iframe').height(height);
            $(this.editor).mouseleave(function (event) {
                return captureJHtmlContentTextareaonchange(elemId);
            })

        }
    });

How to auto resize the JHTML text area based on content height

1 Answers1