function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Travis IcenogleTravis Icenogle 

How to make Visualforce Fit Page Layout iFrame Width

Hello,
I am brand new to Visualforce and relativily new to Salesforce in general.  I have created a simple Visualforce page that I am inserting into a Lightning Page Layout section.  I can not seem to get the VF page to fill out the width of the page layout section.  

User-added image I know the height is set at the page layout point, I think I have it at 300.

From digging, I am seeing that it can be done via jquery with iframe, but I am not finding a way to actually make it work.  

Can anyone help guide me in the right direction?

thanks,
Travis
Deepali KulshresthaDeepali Kulshrestha
Hi Travis,

I've gone through your requirement and you can simply achieve it by javascript:

-->The trick is to resize the iframe with JavaScript after you know the size of the browser viewport: 
<apex:page sidebar="false">
    <apex:iframe src="https://www.salesforce.com/" id="theFrame" />
    <script>document.getElementById('theFrame').height = window.innerHeight - 220;</script>
   </apex:page>

-->For bonus points, you can trim the container cell padding if you need and play with the 220 figure.

   <style>table#bodyTable {border-collapse: collapse;} table#bodyTable td {padding: 0;}</style>

-->Or You can additionally deal with when the window is resized:

   <script>
    (function() { //this wrapper prevents pollution of the global scope
        var windowOnresize = window.onresize;
        window.onresize = function() {
            if (windowOnresize) windowOnresize(); //don't trample the handler; intercept it
            document.getElementById('theFrame').height = window.innerHeight - 220;
        };
    }());
   </script>


-->And for more details you can go through below links:
  https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_width_aware.htm


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com
David SchachDavid Schach
@Deepali, you took this answer directly from someone else's answer on Stackexchange.
https://salesforce.stackexchange.com/questions/30605/how-to-create-visualforce-page-with-iframe-with-auto-resizing-height

At least give credit to the person you stole your answer from.