Monday, February 18, 2013

SharePoint 2013 App Part scrollbars

I had this problem the other day with no scrollbar showing up when the content of my App Part was larger than the iframe.

It turned out to be the /_layouts/15/1033/styles/themable/corev15.css that was the reason. This file is included on my App Part aspx page, in order to get the same style as the rest of the site.

The simple solution to the problem was just to add a style tag with overflow to the body tag on the App Part aspx page.

<body style="overflow:auto;">

Result:

image

If you wanner resize from your iframed page, its possible by use of the postMessage command.

Found on the forum posted by Yina Arenas

<script type="text/javascript">

    window.onload = function () {

        var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

        var regex = new RegExp(/[Ss]ender[Ii]d=([\daAbBcCdDeEfF]+)/);

        results = regex.exec(this.location.search);

        if (null != results && null != results[1]) {

            target.postMessage('<message senderId=' + results[1] + '>resize(500,200)</message>', '*');

        }

    }

</script>

Futher more Richard diZerega has written this very good blog post on Optimizing User Experience of Apps for SharePoint 2013

1 comment:

Ruchira said...

Excellent piece of code but few things missing. Assign results as a var. Otherwise it will throw an error.