How to Expand Multi-line Text to Fit Content in Dynamics 365

Dominic Jarvis, 26 September 2017

So I’m sure that you’ve all come across a situation in Microsoft Dynamics 365 before where you’ve created a Multi-line text object on a form, given it lots of space, and then been annoyed when the edit box doesn’t use up the entire space. Once the text length has passed the limits of the allocated space, it scrolls. This can be quite an annoying aesthetic issue for Microsoft Dynamics 365 user. Be warned that approaches made in this blog are not supported.

It is possible however, to edit the styles of the text box, so that the field takes up as much room as it needs, with an optional hard limit. Doing this allows for more responsive form design, but is also unsupported in Microsoft Dynamics 365.
Doing so, however, allows you to have a situation like below.

However, it’s usually more sensible to impose a hard limit of how much the content is allowed to expand. (~400px usually looks quite nice).

The code for achieving this is very simple – a small piece of JavaScript.

 
This piece of code is run using the field name of an attribute in Dynamics 365, for example “mag_description”, which is the name of the field that this example is run on.

Setting the maxHeight value to a static value will keep standard Dynamics 365 behaviour, and allow you to scroll to view text that is past the max height. Using this functionality will also expand the edit box to match the height of the label (the text that is displayed when not selected).

There are lots of other CSS values that you can play around with, which sometimes produce rather interesting results. This one however, is probably one of the more useful that I’ve found.