Custom auto resizing of textareas in work item forms

Martin_Blomgren

To avoid excessive scrolling in work item forms all elements shouldn't be bigger than needed. However this is not the case when it comes to 'Description' (and other) text areas. Even with a big screen the description area fills almost all height, which makes it a bit weird in those cases when there is 1-2 rows of text.

To avoid this and get a smoother experience I made a custom solution which resizes textareas on form load and even so when typing into the text area.



As of now all text areas with a Description, Reason or Notes label in IR, SR, CR & PR  general tab forms are auto resized but it's easy expandable.

Tested with IE11, Chrome 55, Firefox 45 & Edge.

I've attached the files needed in a zip archive. To install just drop the files in CustomSpace (merge custom.js if you have other stuff there already!)

Jonathan_Boles

@Martin_Blomgren, first off, thanks for yet another great customization. I've put this in our sandbox and loving it - I'm curious to know - Is it possible to add a limit to the amount of rows the box can auto-expand to before it shows a scrollbar? I've been digging into it a bit but I'm am at the very very start of looking at JS and it's beyond my reach. Would appreciate any tips you might have to get at this as your time allows.

Just thinking it would be possible for some folks to paste in long emails/strings of text with lots of spacing that could really make this super long and it would be nice to cap it at a certain amount before the scrollbar appears.

Martin_Blomgren

@Jonathan_Boles, agree! Just a matter of css to set a max height and use scrollbars when it's reached, the same way @Brian_Wiest did in the custom action log. Will update and post a new version!

Martin_Blomgren

Updated version where I've added the option to set a max height on the resized textareas as per @Jonathan_Boles suggestion.

Default the max height is on and set to 300px. If you want another value change it in the top of the JS file:

// Enable max height for resized textareas, true/false<br>var useMaxHeight = true;<br>// Specify the max height a textarea can be before scrollbar is visible<br>var maxHeight = "300px";

Nick_Flint

Any chance this could be used on request offering forms too?

Martin_Blomgren

@Nick_Flint, you could change the code to load on any page and then target whichever textarea you want.
 I'm guessing here that you have RO where you need the ability to have more characters but don't want that big 10 rows textarea, otherwise you could adjust the RO textfields length.

Ben_Tey

anyone facing issue as below.

There is the result for textarea not in general tab.

It will auto resize only when have input from keyboard.

Can anyone help to fix this ? i'm not really good in javascript

Martin_Blomgren

@Ben_Tey, I'll admit that this very customization isn't always working as supposed. Your best bet currently is with Chrome but sometimes that's not enough.

Will go over the code and make sure it works as intended when the time comes...

Amarjit_Dhillon

Hi, Since the latest version of the portal upgrade, the Action Log box doesn't resize anymore. I've tried to read the code but i cant make heads or tails of it. Does anyone have any ideas?

Brad_McKenna

@Ben_Tey I too noticed the issue and had been lazy until today.

The code is looking for an input to remove the autoresize. For us, we were 'ok' with changing keyboard input to simply clicking within the text box. For us this kept for form/page clean, thus only expanding the field when a user clicks the field.

As Shown below, for line 89  on version 0.2, i changed from on 'keyup input' to click. Simply the box will resize when the field is clicked into. 

//$(this).on('keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize');

$(this).on('click', function() { resizeTextarea(this); }).removeAttr('data-autoresize');

Ben_Tey

Brad_McKenna said:

@Ben_Tey I too noticed the issue and had been lazy until today.

The code is looking for an input to remove the autoresize. For us, we were 'ok' with changing keyboard input to simply clicking within the text box. For us this kept for form/page clean, thus only expanding the field when a user clicks the field.

As Shown below, for line 89  on version 0.2, i changed from on 'keyup input' to click. Simply the box will resize when the field is clicked into. 

//$(this).on('keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize');

$(this).on('click', function() { resizeTextarea(this); }).removeAttr('data-autoresize');

The user requirement here is to print the CR form with all details. 
Thank you for hint on line89, will take a look into it and change it to reflect when page print or page load to fulfill customer requirement.

Peter_Settle

@Martin_Blomgren, is there any way to get this function applied to the activities in a CR as the most annoying thing is the Notes field in the MA not expanding to fit the text that's contained within the field.

Peter_Miklian

You can vote for this 'autoresize textbox' feature here:

https://community.cireson.com/discussion/1825/advanced-request-offering-set-text-box-sizes

Chris_Jordan

Is there any easy way to extend the features of this to Hardware Asset and Business Service?

Brett_Moffett

@Chris_Jordan
The Hardware Asset form change was an easy one and v0.3 of the code now supports Hardware Asset description field.

However, I'm not sure what Business Service fields you are talking about as there are none, by default, that are free text fields.

If you have a specific field I can add it in if you need.

Brett_Moffett

@Chris_Jordan
If you have created custom CI classes that you want to display in the new Configuration Item views, then each one will need to be added to the JS file with the appropriate CI ClassName.
You can find the class name by typing the following in the console of the browser:
pageForm.viewModel.ClassName

Happy to help anyone add these as custom additions to their environment if they need a hand.

Chris_Jordan

Hi Brett,

Looking to add this to the Business Service class and extended strings.

I have added the following:

  // ************ BUSINESS SERVICE FORM ************

  app.custom.formTasks.add('BusinessService', null, function (formObj, viewModel) {

    var hwaFormHookFunction = function() {

      var pageElement = $('label[for="Description"]')

      if (pageElement.length > 0) {

        $(document).unbind("ajaxComplete", hwaFormHookFunction);

        CustomResizeFormHandler();

         

      }

    }

    $(document).bind("ajaxComplete", hwaFormHookFunction);

  });

The description textbox becomes re-sizable but still defaults to maximum size.

Any help would be appreciated, thanks mate.