+ Start a Discussion
Travis IcenogleTravis Icenogle 

How to make Visualforce Fit Page Layout iFrame Width

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?

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>

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

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

-->And for more details you can go through below links:

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
David SchachDavid Schach
@Deepali, you took this answer directly from someone else's answer on Stackexchange.

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