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

2 comments:

Ruchira said...

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

Karthika Shree said...

Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us
Sharepoint Training in Chennai