16

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

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

  • 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 Dec 19 '13 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 Jul 15 '14 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 Jul 15 '14 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 Jul 28 '17 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 Jul 28 '17 at 14:22
1

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, "*");
                }
            };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.