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
Dippan PatelDippan Patel 

Visualforce page in Lightning not utilizing full screen

Hi All, 

My page is being displayed in 1/5th part of screen with scroll bars and not utilizing the entire screen for display. Here the view: 
User-added image

Any idea why? 

Thank you
VinayVinay (Salesforce Developers) 
Hi Dippan,

This seem to be a release issue, Kindly review below KI link and click on 'This issue effects me'.

https://trailblazer.salesforce.com/issues_view?id=a1p4V000001mO39QAE

Hope above information was helpful.

Please mark as Best Answer so that it can help others in the future.

Thanks,
Vinay Kumar
AnudeepAnudeep (Salesforce Developers) 
Have you inserted the design system style sheet in your VF page?

<!-- Import the Design System style sheet -->
<apex:slds />

Here is a sample code if you want to do a comparision
  
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
 
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>SLDS ResponsiveDesign Visualforce Page in Salesforce Mobile</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
 
       <!-- Import the Design System style sheet -->
       <apex:slds />
    </head>
    <body>
 
      <!-- REQUIRED SLDS WRAPPER -->
      <div class="slds-scope">
 
        <!-- PRIMARY CONTENT WRAPPER -->
 
          <!-- RESPONSIVE GRID EXAMPLE -->
          <div class="myapp">
            <div class="slds-grid slds-wrap">
              <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">
                <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 1</div>
              </div>
              <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--3-of-4">
                <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 2</div>
              </div>
            </div>
          </div>
          <!-- / RESPONSIVE GRID EXAMPLE -->
      </div>
    </body>
  </html>
</apex:page>


https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_responsive.htm

Let me know if it helps