Enhancement Request: Auto-size description field's height to better display its text

Friday, January 23, 2015
Please change all description fields' display size.  Please make it auto-size its height.

1.  When it does not have focus (so when it is not being edited), then it should be tall enough so that its entire text can be read without any scrolling within the description field itself.  (The user may still need to scroll the page if the description is that big.)

2.  When it does have focus (so when it is being edited), then it should still be tall enough to see the text being edited without scrolling, but it should not be any taller than the window area.  (max size = window height)

We use long descriptions sometimes with tables and bullet points, etc.  It's a big pain point for users to not be able to see more of the description than about 2 inches in height.
3 Replies
Friday, January 30, 2015
re: jfreed Friday, January 23, 2015
Hi Jon

Thanks for the feedback, the good news is that we have this already planned as a future enhancement :-)

Friday, January 30, 2015
re: inflectra.jimx Friday, January 30, 2015
Sounds great.  Thank you.  If it's not too much trouble, please also add a resizable attribute to the box for entering a new comment.  Thanks!
Thursday, February 26, 2015
re: jfreed Friday, January 30, 2015
We have a Greasemonkey-like script that does this functionality for us for now.

FYI, here are the pertinent changes, just in case they are helpful to anybody.

(This pseudo-code will not execute, but you can use it to identify object identifiers.)

On page load, for every rich-text-edit display box:
  // Change the display box to be 100% of height even if that requires scrolling in the window
  oRteContainer.find("div.rteDiv").css("min-height","100px").css("height", "auto");
  oRteContainer.css("height", "auto").parent().css('height','auto');

// Wait until until the Rich Text Editor Display Box is replaced with the Rich Text Editor Edit Box
// (Wait until we can find the Rich Text Editor Edit box)
oRteContainer.find("iframe[id^='frm_cplMainContent_']").length > 0

When the Rich Text Editor Edit Box becomes visible:
  //  set the height of the Rich Text Editor edit iframe to its ideal height
  // (ideal height is the display box's height plus a little but no more than window height minus the rich text editor's toolbar height)
  oRteContainer.find("iframe[id^='frm_cplMainContent_']").css('height', iIdealEditHeight);   
  //  also make it resizable
  oRteContainer.find("iframe[id^='frm_cplMainContent_']").css('resize', "vertical");

// Wait until the Rich Text Editor edit box is replaced with the Rich Text Editor display div
// (Wait until the display box is displayed)
oRteContainer.find("div.rteDiv").css("display") != "none"
// Then execute the on-page-load code again (above)

Spira Helps You Deliver Quality Software, Faster and With Lower Risk

And if you have any questions, please email or call us at +1 (202) 558-6885


  • Started: Friday, January 23, 2015
  • Last Reply: Thursday, February 26, 2015
  • Replies: 3
  • Views: 5651