Challenge

The feature that I really miss on form designer is that you can set more properties on web resources. One thing that gave me headaches is web resource height. It's just too small or it can't be big enough to fill all the needs.

I've been using small JS snippet to overcome such issues so I can show web resource the way I want.

function resizeIframe(webresourceName){
    var height = document.body.scrollHeight;
    parent.document.getElementById(webresourceName).style.height=height+"px";
}

All that snippet does is that it takes the height of the HTML body tag and it sets the height of the web resource container to that value.

There is always a catch around those unsupported changes that you make to the forms. Problem is if you don't set the Row Layout section in the properties the right way, JS snippet above will not work the way we wanted. Everything that you need to set is shown on the image below and it's located in the Row Layout section.

The number of rows is setting is not that important for the large web resources because you will need more than 40 rows in most cases so you can set it to 1 in this case.

"Automatically expand to use available space" is where the magic happens. You need to set this one for the web resources that will change the height of the body on the form events. For example, if your HTML is not always the same height (eg. grid that displays few datasets that are not the same size) you need to check the checkbox because if you don't do it height will not be changed dynamically every time the HTML height is changed. Height will be calculated on the initial load and the container will get fixed padding that will not let you manipulated height just by setting the height value.

The checked checkbox will solve all the problems for you. Once it's set you will be able to change the height any time you want and it will be displayed as expected.

Of course, there is a form limitation that will force you to have only one checked checkbox on the single form so you need to make sure that you design your forms that way that you don't need multiple or just put the web resources on the bottom of the page so the whitespace that is added to the bottom of the web resource container doesn't matter that much.

Final result

I wanted to show you the result on the small demo web resource that displays some dataset based on the date selected in the dropdown menu. Every dataset will result with different HTML height and I called the JS function after every change of the date value in the dropdown.

Situation #1

Situation #2

As you can see the is the same amount of whitespace between the Orders section and the Consulting notes section because height is calculated dynamically after every change of the date dropdown field.

Conclusion

It's obvious that this is not a supported way of doing it and it can be broken with next future Dynamics 365 update, but for now it's my way of doing it till Microsoft doesn't implement the supported way to achieve things like this one.