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
Holly Havelka 10Holly Havelka 10 

Help with styling my visualforce page in Lightning Design System

Hi all,

I am trying to create a simple visualforce page, which I can then display in a lightning component on lightning page layout.  The issue I am running into is that part of the in-line edit is being cut-off on my page.  See below image.
In Line Edit
Here is my visualforce page code: 
<apex:page standardController="Contact" lightningStylesheets="true">
  <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>Contact Details</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      
      <apex:slds />
    </head>
    <body>
      <div class="slds-scope">
          <apex:form styleClass="slds-form-element slds-size_2-of-2" >
              <apex:pageBlock >
                  <apex:pageBlockSection title="Basic">
                      <apex:pageBlockSectionItem >
                          <apex:outputlabel value="Name: "/>
                          <apex:outputField value="{!Contact.Name}">
                              <apex:inlineEditSupport event="ondblClick"/>
                          </apex:outputField>
                      </apex:pageBlockSectionItem>
                      
                      <apex:pageBlockSectionItem >
                          <apex:outputlabel value="Account Name: " />
                          <apex:outputField value="{!Contact.AccountID}">
                              <apex:inlineEditSupport event="ondblClick"/>
                          </apex:outputField>
                      </apex:pageBlockSectionItem>
                      
                      <apex:pageBlockSectionItem >
                          <apex:outputlabel value="Title: " />
                          <apex:outputField value="{!Contact.Title}">
                              <apex:inlineEditSupport event="ondblClick"/>
                          </apex:outputField>
                      </apex:pageBlockSectionItem>
                      
                      <apex:pageBlockSectionItem >
                          <apex:outputlabel value="Email: " />
                          <apex:outputField value="{!Contact.Email}">
                              <apex:inlineEditSupport event="ondblClick"/>
                          </apex:outputField>
                      </apex:pageBlockSectionItem>
                  </apex:pageBlockSection>
              </apex:pageBlock>
          </apex:form>
      </div>
    </body>
  </html>
</apex:page>
Any thoughts on how to fix this page?
Best Answer chosen by Holly Havelka 10
Ajay K DubediAjay K Dubedi
Hi Holly,

First, you need to switch to salesforce lightning experience.

Your code works fine for me. Please see the screenshot below.

User-added image
User-added image


Thank You,
Ajay Dubedi

All Answers

Rahul Jain 169Rahul Jain 169
Works for me
Holly Havelka 10Holly Havelka 10
Thanks Rahul Jain 169, but now with the same code, I am getting the below in my visualforce page in the lightning component:

Visualforce page
Holly Havelka 10Holly Havelka 10
I logged out and logged back in.  Now it is showing the same way as my first image.  When you resize your window screen, does the edit still work without getting cut off?
Ajay K DubediAjay K Dubedi
Hi Holly,

First, you need to switch to salesforce lightning experience.

Your code works fine for me. Please see the screenshot below.

User-added image
User-added image


Thank You,
Ajay Dubedi
This was selected as the best answer
Holly Havelka 10Holly Havelka 10
Thanks for looking at this Ajay!  The issue I am facing is that it's not a responsive page layout, so when I reduce the webpage screen, it cuts off part of the edit box.  Any idea how to put this page into a responsive design?