none
Set width of iframe to fit the Wpbpart

    Question

  • Hello,

    I need assistance in setting width of iframe so that it fits to the webpart. please refer to the screen shot.

    http://s000.tinyupload.com/?file_id=01184965143973154832

    My DOM looks like:

    <div style="width:100%">
    	<table style="width:100%">
    		<tr>
    			<td style="width:30%">	
    				<WebPartPages:WebPartZone runat="server" Title="loc:First Column" ID="FirstColumn" FrameType="TitleBarOnly">
    					<ZoneTemplate>
    						
    
    					</ZoneTemplate>
    				</WebPartPages:WebPartZone>&nbsp;
    			</td>
    			<td style="width:30%">
    				<WebPartPages:WebPartZone runat="server" Title="loc:Second Column" ID="SecondtColumn" FrameType="TitleBarOnly">
    					<ZoneTemplate>
    						
    
    					</ZoneTemplate>
    				</WebPartPages:WebPartZone>				
    			</td>	
    			<td style="width:40%">	
    				<WebPartPages:WebPartZone runat="server" Title="loc:Third Column" ID="ThirdColumn" FrameType="TitleBarOnly">
    					<ZoneTemplate>						
    
    					</ZoneTemplate>
    				</WebPartPages:WebPartZone>					
    			</td>
    		</tr>	
    	</table >	
    </div>



    • Edited by Kodnil Wednesday, December 21, 2016 11:52 AM
    Wednesday, December 21, 2016 8:25 AM

All replies

  • Hi,

    Could you post your screenshot in forum?

    I tested your code seems no issue:

    Code in web part page:

    <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
    	<div class="ms-hide">
    	<WebPartPages:WebPartZone runat="server" title="loc:TitleBar" id="TitleBar" AllowLayoutChange="false" AllowPersonalization="false" Style="display:none;"><ZoneTemplate>
    	<WebPartPages:TitleBarWebPart runat="server" HeaderTitle="Untitled_1" Title="Web Part Page Title Bar" FrameType="None" SuppressWebPartChrome="False" Description="" IsIncluded="True" ZoneID="TitleBar" PartOrder="2" FrameState="Normal" AllowRemove="False" AllowZoneChange="True" AllowMinimize="False" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" DetailLink="" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="Cannot import this Web Part." PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="True" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_963ef124_004e_40af_b587_1b11262f7cef" AllowClose="False" ChromeType="None" ExportMode="All" __MarkupType="vsattributemarkup" __WebPartId="{963EF124-004E-40AF-B587-1B11262F7CEF}" WebPart="true" Height="" Width=""></WebPartPages:TitleBarWebPart>
    
    	</ZoneTemplate></WebPartPages:WebPartZone>
      </div>
      <table class="ms-core-tableNoSpace ms-webpartPage-root" width="100%">
    				<tr>
    			<td style="width:30%;border:1px solid fuchsia">	
    				<WebPartPages:WebPartZone runat="server" Title="loc:First Column" ID="FirstColumn" FrameType="TitleBarOnly">
    																				<ZoneTemplate>
    						
    					 </ZoneTemplate>
    				</WebPartPages:WebPartZone>&nbsp;
    			</td>
    			<td style="width:30%;border:1px solid fuchsia" >
    				<WebPartPages:WebPartZone runat="server" Title="loc:Second Column" ID="SecondtColumn" FrameType="TitleBarOnly">
    																				<ZoneTemplate>
    		
    					 </ZoneTemplate>
    				</WebPartPages:WebPartZone>				
    			</td>	
    			<td style="width:40%;border:1px solid fuchsia">	
    				<WebPartPages:WebPartZone runat="server" Title="loc:Third Column" ID="ThirdColumn" FrameType="TitleBarOnly">
    																				<ZoneTemplate>						
    			
    					 </ZoneTemplate>
    				</WebPartPages:WebPartZone>					
    			</td>
    		</tr>				<SharePoint:ScriptBlock runat="server">if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</SharePoint:ScriptBlock>
    		</table>
    </asp:Content>
    

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, December 22, 2016 4:38 AM

  • I was not able to paste screen shot in forum earlier. Please refer to the issue.
    Thursday, December 22, 2016 4:54 AM
  • Hi,

    If you want to change iframe width, you could use jQuery to calculate the value based on parent container and then update.

    Here are some links for your reference.

    http://stackoverflow.com/questions/16471767/get-div-width-and-height-in-javascript

    http://stackoverflow.com/questions/14913784/change-iframe-width-and-height-using-jquery

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, December 22, 2016 6:00 AM
  • I tried to find width of the first <td id="myTD"> with below code but it gives me number as 1463PX. I think it is incorrect.

    var width = myTD.offsetWidth + 'px';
    var height = myTD.offsetHeight + 'px';

    Any Clue on how to find width of the container <TD>?

    Thursday, December 22, 2016 12:05 PM
  • Hi,

    Try to execute your code after sp.js loaded, for example:

     <script>
            ExecuteOrDelayUntilScriptLoaded(function(){
                var myTD = document.getElementById("myTD");
                alert(myTD.offsetWidth);
            }, "sp.js");
            
        </script>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by Kodnil Friday, December 23, 2016 8:41 AM
    • Unmarked as answer by Kodnil Friday, December 23, 2016 9:15 AM
    Friday, December 23, 2016 1:27 AM
  • that didnt produce me any result except symbols below:

    Friday, December 23, 2016 4:52 AM
  • Hi,

    Seems your code has syntax error, you could try to add the code to script editor web part.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, December 23, 2016 7:16 AM
  • Hi Lee,

    Applying container width did not solve my problem.

    Friday, December 23, 2016 9:16 AM
  • Hi,

    Try to update the width of parent container by developer tool(I’m using IE 11, press F12) first, check which container restricts the width of iframe. Then update its’ value by JavaScript.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, December 23, 2016 9:28 AM
  • Hi,

    Is any update for your issue?

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, December 28, 2016 7:06 AM
  • I could find out the width of the container but when i set the width using JQuery function, i still see white space as shown in screen shot above. Not sure whats wrong.
    Wednesday, December 28, 2016 8:56 AM
  • Hi,

    Does it works if you set the width for iframe by developer tool directly?

    I suggest test it by developer tool first( may have other parents restricts its’ width) and then update.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, December 29, 2016 1:45 AM
  • No it does not work...I have tried that as well....here is the screen shot.

    <script src="/sites/<my site>/SiteAssets/jquery-1.10.2.js"></script>
    <script type="text/javascript">
            ExecuteOrDelayUntilScriptLoaded(function(){
                var myTD1 = document.getElementById("myTD1");
                 var myTD2 = document.getElementById("myTD2");            
            }, "sp.js");
             $(document).ready(function () {
            $("#frame1").width(myTD1);
            $("#frame1").height(myTD2);
        });
    </script> 

    Thursday, December 29, 2016 5:48 AM
  • Hi,

    If the width you need to adjust is power bi report instead of iframe, I would suggest post a new thread in power bi forum.

    http://community.powerbi.com/

    So you will get the most qualified pool of respondents, and other partners who read the forums regularly can either share their knowledge or learn from your interaction with us. 

    Thanks for your understanding.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, December 29, 2016 6:18 AM
  • i am using Iframe to host Power BI Reports and if i set static height and width properties it works for me. All i am looking is to set the properties dynamically.
    Thursday, December 29, 2016 7:05 AM
  • Hi,

    If you set fixed value works fine, try to update your logic as below and try. (you could debug if the width of  iframe update or not by developer tool)

    <script src="/sites/<my site>/SiteAssets/jquery-1.10.2.js"></script>
    <script type="text/javascript">
            ExecuteOrDelayUntilScriptLoaded(function(){
                var myTD1 = document.getElementById("myTD1");
                 var myTD2 = document.getElementById("myTD2");
                $("#frame1").width(myTD1);
            $("#frame1").height(myTD2);
            }, "sp.js");      
    </script> 

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, December 29, 2016 7:32 AM