App Part iFrame width to 100%

Question

I successfully created an App Part using a provider-hosted high trust App.

The app uses bootstrap and has dynamic content to fit page size. The problem is that when I publish the App/Web Part, the generated iFrame and containing div have fixed height and width.

All I need is that the generated iFrame for my App Part has the property of width=100% and my div class= "ms-webpart-chrome-title" without any width property (it gets a default of 300px).

I can change all this directly on chrome and see the changes but I have no idea where to configure this on my SharePoint App!

Thanks in Advance

Ronak Patel · Accepted Answer · 2016-10-21 08:45:33Z

23

I just had this issue the other day (but with height). The key is to use postMessage to set the width of the iframe. This worked for me (put in the .aspx file of app):

<body>
<div id="dynamicContent">
//App content here
</div>


<script type="text/javascript">
    "use strict";
    window.Communica = window.Communica || {};

    $(document).ready(function () {
        Communica.Part.init();
    });

    Communica.Part = {
        senderId: '',

        init: function () {
            var params = document.URL.split("?")[1].split("&");
            for (var i = 0; i < params.length; i = i + 1) {
                var param = params[i].split("=");
                if (param[0].toLowerCase() == "senderid")
                    this.senderId = decodeURIComponent(param[1]);
            }


            this.adjustSize();
        },

        adjustSize: function () {
            var step = 30,
                newHeight,
                contentHeight = $('#userDataContent').height(),
                resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';

            newHeight = (step - (contentHeight % step)) + contentHeight;

            resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);
            resizeMessage = resizeMessage.replace("{Height}", newHeight);
            resizeMessage = resizeMessage.replace("{Width}", "100%");

            window.parent.postMessage(resizeMessage, "*");
        }
    };
</script>
</body>

Replace #userDataContent with your main div id name

Here is where I found the information (as you can see my script is almost identical): http://ctp-ms.blogspot.com/2013/03/resizing-app-parts-with-postmessage-in.html

edited Oct 21, 2016 at 8:45

Ronak Patel

3,2613 gold badges26 silver badges46 bronze badges

answered Dec 18, 2013 at 20:07

wjervis

5,73826 silver badges46 bronze badges

3

This works Out of The Box! Congrats! Just a note for someone who is new to javascript: If you want your app to ajust heigh also you have to replace #userDataContent with you main div id name. Thanks for a quick answer! +1!

Fonsini
– Fonsini

2013-12-19 09:09:01 +00:00
Commented Dec 19, 2013 at 9:09
As a Sharepoint Rookie I would like to ask where I can find the aspx file to add the code mentioned above. Any help is much appreciated! Regards, Dirk

user31564
– user31564

2014-07-15 15:30:59 +00:00
Commented Jul 15, 2014 at 15:30
@Dirk, you can add the script to either the app part page, or save it in a JavaScript file, and call the function in the app part page.

wjervis
– wjervis

2014-07-15 16:21:04 +00:00
Commented Jul 15, 2014 at 16:21
this worked for me only for the width. The height still forced a vertical scroll bar in the page. To me, this is a big barrier to using sharepoint-hosted apps. I am stuck with visual web parts/wsp until MS makes the client web part automatically size to the content like the visual web part does.

steveareeno
– steveareeno

2017-07-28 12:59:49 +00:00
Commented Jul 28, 2017 at 12:59
@steveareeno This sets width to 100%, and the height to the calculated value. Double check the height that's being calculated. Though, I agree, this should've been something built-in/automatic, and not require scripting to accomplish.

wjervis
– wjervis

2017-07-28 14:22:50 +00:00
Commented Jul 28, 2017 at 14:22

| Show 1 more comment

alecwantstobattle · Accepted Answer · 2018-07-03 11:18:13Z

what I did with this is I created the width first, recreated the height and width to not get the skewered height.

Communica.Part = {
                senderId: '',

                init: function () {
                    var params = document.URL.split("?")[1].split("&");
                    for (var i = 0; i < params.length; i = i + 1) {
                        var param = params[i].split("=");
                        if (param[0].toLowerCase() == "senderid")
                            this.senderId = decodeURIComponent(param[1]);
                    }

                    this.adjustWidth();
                },

                recall: function () {
                    var params = document.URL.split("?")[1].split("&");
                    for (var i = 0; i < params.length; i = i + 1) {
                        var param = params[i].split("=");
                        if (param[0].toLowerCase() == "senderid")
                            this.senderId = decodeURIComponent(param[1]);
                    }

                    this.adjustHeight();
                },

                adjustWidth: function () {
                    var step = 30,
                        newHeight,
                        contentHeight = $('#summary_content').height(),
                        resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';

                    newHeight = (step - (contentHeight % step)) + contentHeight;
                    resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);                        
                    resizeMessage = resizeMessage.replace("{Width}", "100%");
                    window.parent.postMessage(resizeMessage, "*");
                },

                adjustHeight: function () {
                    var step = 30,
                        newHeight,
                        contentHeight = $('#summary_content').height(),
                        contentWidth = $('#summary_content').width(),
                        resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';

                    newHeight = (step - (contentHeight % step)) + contentHeight;
                    console.log(contentHeight)
                    resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);
                    resizeMessage = resizeMessage.replace("{Height}", newHeight);
                    resizeMessage = resizeMessage.replace("{Width}", contentWidth);

                    window.parent.postMessage(resizeMessage, "*");
                }
            };

Stack Exchange Network

App Part iFrame width to 100%

2 Answers 2

Your Answer

Linked

Hot Network Questions

App Part iFrame width to 100%

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions