Fail to resize SharePoint App Part if "Chrome Type" is "None" or "Border Only"

Posted on Word count in article: 1.3k Reading time ≈ 2 mins.

Issue

Today I met a bug in SharePoint 2013, I failed to resize my app part by using postMessage. Here is my code:

1
2
var message = "<Message senderId=" + senderId + ">" + "resize(" + width + "," + height + ")</Message>";
window.parent.postMessage(message, hostUrl);

It fails to work if I set Chrome Type to None or Border Only. And I found an error message in console:

1
Uncaught TypeError: Cannot read property 'style' of null

Then I located the code in my web part page which throws the error:

1
2
3
4
5
if (resizeWidth)
{
    document.getElementById(webPartDivId + '_ChromeTitle').style.cssText = widthCssText;
    cssText = 'width:100% !important;'
}

It tries to find the title element and resize it. But document.getElementById(webPartDivId + '_ChromeTitle') returns null if Chrome Type is None or Border Only!
Because the app part doesn’t have a title under these 2 modes. Of course it will throw exception.

Solution

This bug is described here, you can install a patch to fix this bug.

After the patch is installed, you can find that the original code is changed, it will resize the element only if it’s not null:

1
2
3
4
5
6
7
8
9
10
if (resizeWidth)
{
    var webPartChromeTitle = document.getElementById(webPartDivId + '_ChromeTitle');
    if (null != webPartChromeTitle)
    {
        webPartChromeTitle.style.cssText = widthCssText;
    }

    cssText = 'width:100% !important;'
}

Hope it’s helpful.

Reference