Monday, July 13, 2015

How To Display A Web Resource In CRM 2015 Without Loosing Column Width

I was recently adding JavaScript to display an iFrame when the fields required by the web resource had been populated on the form.  I noticed that the width of the iFrame was getting squished when it was being displayed:

Default:
Before


After calling setVisible():
After


It took some time stepping through the CRM libraries to figure out what was going on, but I believe it to be a bug within CRM (having the same issue?  Upvote this ticket!)  By default, CRM will attempt to update the CSS Table-Layout of the control when setting it’s visibility.  The fix is unsupported, but resolves the re-sizing issue.  After setting the visibility, check to see if the control is an iFrame, and the visibility is true.  If so, update the css of the parent table to be “fixed” *UPDATE 7/14/2015* Also need to set the height if there is a data-height attribute specified.

if (controlName.indexOf("IFRAME") >= 0 && visibility) {
    // https://connect.microsoft.com/dynamicssuggestions/feedback/details/1541195
    // THIS IS A FIX FOR A BUG WITH CRM WHEN SETTING IFRAMES AS VISIBLE.
    var ctrl = $("#" + controlName + "_d");
    ctrl.parents("table").last().css("table-layout", "fixed");
    var height = ctrl.attr("data-height");
    if (height) {
        // Set the height if defined
        ctrl.css("height", height + "px");
        ctrl.css("padding-bottom", "0");
    }
}