Auto-expanding Request Offering prompts as users type beyond a single line

David_Darling

Hi Experts, is it possible to have Request Offering prompt textboxes auto-expand as users type more than one line of text?  The SCSM Silverlight SSP portal does this, can we somehow have the same functionality in the Cireson Portal?

David_Darling

We ended up implementing the following code to accomplish this:

$(document).ready(function (){
 if(window.location.href.indexOf(",514fb026-b7cf-82b1-e507-142cefbe9bbb") > -1 || window.location.href.indexOf(",3e4f26b5-8cbe-925a-f94e-13472daa1640") > -1){
 
      (function($) {
    $.fn.autogrow = function() {
         return this.each(function() {
             var textarea = this;
             $.fn.autogrow.resize(textarea);
             $(textarea).focus(function() {
                textarea.interval = setInterval(function() {
                   $.fn.autogrow.resize(textarea);
                }, 500);
             }).blur(function() {
                clearInterval(textarea.interval);
             });
         });
     };
     $.fn.autogrow.resize = function(textarea) {
         var lineHeight = parseInt($(textarea).css('line-height'), 10);
         var lines = textarea.value.split('\n');
       var columns = textarea.cols;
         var lineCount = 0;
         $.each(lines, function() {
            lineCount += Math.ceil(this.length / columns) || 1;
        });
        //var height = lineHeight * (lineCount + 1);
   var height = lineHeight * (lineCount);
        $(textarea).css('height', height);
    };
})(jQuery);

//call autigrow for each textarea
var item = $("div[class=form-group]").find("textarea");
                $(item).each(function () {
                     $(this).autogrow();                 
                });
   

};
});

Geoff_Ross

Hi David,

Not easily, or even complex-ily. Maybe super complexi-ly with some code that runs on RO pages, targets text inputs, evaluate the length of the input on change and then increase the size of the box as required.

Much simpler however, you can specify the height of the box in the definition of the RO as per this KB:

https://support.cireson.com/KnowledgeBase/View/87#/

Geoff

David_Darling

We ended up implementing the following code to accomplish this:

$(document).ready(function (){
 if(window.location.href.indexOf(",514fb026-b7cf-82b1-e507-142cefbe9bbb") > -1 || window.location.href.indexOf(",3e4f26b5-8cbe-925a-f94e-13472daa1640") > -1){
 
      (function($) {
    $.fn.autogrow = function() {
         return this.each(function() {
             var textarea = this;
             $.fn.autogrow.resize(textarea);
             $(textarea).focus(function() {
                textarea.interval = setInterval(function() {
                   $.fn.autogrow.resize(textarea);
                }, 500);
             }).blur(function() {
                clearInterval(textarea.interval);
             });
         });
     };
     $.fn.autogrow.resize = function(textarea) {
         var lineHeight = parseInt($(textarea).css('line-height'), 10);
         var lines = textarea.value.split('\n');
       var columns = textarea.cols;
         var lineCount = 0;
         $.each(lines, function() {
            lineCount += Math.ceil(this.length / columns) || 1;
        });
        //var height = lineHeight * (lineCount + 1);
   var height = lineHeight * (lineCount);
        $(textarea).css('height', height);
    };
})(jQuery);

//call autigrow for each textarea
var item = $("div[class=form-group]").find("textarea");
                $(item).each(function () {
                     $(this).autogrow();                 
                });
   

};
});