App Part IFRAME Larghezza al 100%

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

  •  10-12-2019
  •  | 
  •  

Domanda

Ho creato con successo una parte di app utilizzando un'applicazione Trust Hight Hosted del provider.

L'app utilizza Bootstrap e ha contenuti dinamici per adattarsi alle dimensioni della pagina.Il problema è che quando posso pubblicare l'app / web part, l'iframe generato e il div contenente hanno un'altezza fissa e la larghezza.

Tutto ciò di cui ho bisogno è che l'IFRAME generato per la mia parte app ha la proprietà di width=100% e il mio div class= "ms-webpart-chrome-title" senza alcuna proprietà di larghezza (riceve un valore predefinito di 300px).

Posso cambiarlo direttamente su Chrome e vedere le modifiche ma non ho idea di dove configurare questo sulla mia app SharePoint!

Grazie in anticipo

È stato utile?

Soluzione

Ho appena avuto questo problema l'altro giorno (ma con altezza).La chiave è usare postmessage per impostare la larghezza dell'IFRAME.Questo ha funzionato per me (inserire il file .aspx di 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>
.

Sostituire #userDataContent con il tuo nome main div id

Ecco dove ho trovato le informazioni (come puoi vedere il mio script è quasi identico): http://ctp-ms.blogspot.com/2013/03/resizing-app-partts-with-postmessage-in.html

Altri suggerimenti

Quello che ho fatto con questo è creato prima la larghezza, ricreato l'altezza e la larghezza per non ottenere l'altezza aspirata. 

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a sharepoint.stackexchange
scroll top