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

3 comments:

Ruchira said...

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

Praylin S said...

Thanks for this great article. Really well written. Thanks for sharing.
Unix Training in Chennai | Unix Shell Scripting Training in Chennai | Unix Course in Chennai | Unix Certification Courses | LINUX Training in Chennai | Excel Training in Chennai | Wordpress Training in Chennai

Block said...

Your very own commitment to getting the message throughout came
to be rather powerful and have consistently enabled employees just
like me to arrive at their desired goals.
mysql course in chennai
unix shell scripting training in chennai
Software training institute in Chennai