Home Community Uploads
image

Cireson Partners, Customers and Community members share your customizations and examples here to help benefit the community as a whole to earn Kudos and badges.

DISCLAIMER

All files and projects located here are provided and come "as-is" and without any warranty or support. Use at your own risk. Your use of Community Uploads is subject to our Terms of Use.

Cireson does not and will not support or maintain these enhancements, extensions, and scripts.

For Team Cireson uploads click here.

Custom auto resizing of textareas in work item forms

Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
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!)

Comments

  • Jonathan_BolesJonathan_Boles Customer Ninja IT Monkey ✭✭✭✭
    @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_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @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!
  • Nick_FlintNick_Flint Customer Advanced IT Monkey ✭✭✭
    Any chance this could be used on request offering forms too?
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @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_TeyBen_Tey Partner Adept IT Monkey ✭✭
    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_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @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_DhillonAmarjit_Dhillon Customer Adept IT Monkey ✭✭
    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_McKennaBrad_McKenna Customer Advanced IT Monkey ✭✭✭
    @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_TeyBen_Tey Partner Adept IT Monkey ✭✭
    @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_SettlePeter_Settle Customer Advanced IT Monkey ✭✭✭
    @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_MiklianPeter_Miklian Customer Advanced IT Monkey ✭✭✭
  • Chris_JordanChris_Jordan Customer Adept IT Monkey ✭✭
    Is there any easy way to extend the features of this to Hardware Asset and Business Service?
  • Brett_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    @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_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    @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_JordanChris_Jordan Customer Adept IT Monkey ✭✭

    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.

Sign In or Register to comment.