Application de la Partie iFrame width à 100%

sharepoint.stackexchange https://sharepoint.stackexchange.com//questions/85442

  •  10-12-2019
  •  | 
  •  

Question

J'ai réussi a créé une Application de la Partie à l'aide d'un fournisseur de hébergé une grande confiance App.

L'application utilise bootstrap et a contenu dynamique pour s'adapter à la taille de page.Le problème est que lorsque je publie l'App/Web Part, le produit de l'iFrame et div contenant avons fixé la hauteur et la largeur.

Tout ce que je besoin est que le iFrame pour mon Application de la Partie a la propriété de width=100% et mon div class= "ms-webpart-chrome-title" sans toute la largeur de la propriété (il devient un défaut de 300px).

Je peux changer tout cela directement sur chrome et de voir les changements, mais je n'ai aucune idée de la façon de configurer sur mon Application SharePoint!

Merci d'Avance

Était-ce utile?

La solution

J'ai juste eu ce problème l'autre jour (mais avec la hauteur).La clé est d'utiliser postMessage pour définir la largeur de l'iframe.Cela a fonctionné pour moi (mis dans le .aspx fichier de l'application): 

<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>

Remplacer #userDataContent avec votre main div id nom

C'est là que j'ai trouvé l'information (comme vous pouvez le voir mon script est presque identique): http://ctp-ms.blogspot.com/2013/03/resizing-app-parts-with-postmessage-in.html

Autres conseils

ce que j'ai fait avec ce que j'ai créé la largeur d'abord, il recrée la hauteur et la largeur de ne pas obtenir l'brochettes de hauteur.

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, "*");
                }
            };
Licencié sous: CC-BY-SA avec attribution
Non affilié à sharepoint.stackexchange
scroll top