1

Using Lightning Design System in a VFP, displayed on a lightning page through a VFP component, the grid system doesn't appear to be working on vertical alignment.

What am I missing?

Code:

<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-grid_vertical-align-center">
                        <div class="slds-col">
                            <span>1</span>
                        </div>
                        <div class="slds-col">
                            <span>2</span>
                        </div>
                        <div class="slds-col">
                            <span>3</span>
                        </div>
                    </div>
                </div>
            </div>
        </body>
</html>           
</apex:page>

Render:

enter image description here

Update:

Adding visual height to the grid div is close:

<div class="slds-grid slds-grid_vertical-align-center" style="height:90vh">

100vh resulted in a scroll bar, I'm assuming vh is taking the overall size of the VFP lightning component as opposed just the visualforce page content.

1

It works as expected: your columns are vertically centered in your grid. What I think you want to achieve is to center the columns on the page. In this case, I suggest you expand your grid to fit the page. One way could be to use vh units in the outer div and a relative height in the inner ones.

Example

<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" style="height:100vh">

      <!-- PRIMARY CONTENT WRAPPER -->

      <!-- RESPONSIVE GRID EXAMPLE -->
      <div class="myapp" style="height:100%">
        <div class="slds-grid slds-grid_vertical-align-center" style="height:100%">
          <div class="slds-col">
            <span>1</span>
          </div>
          <div class="slds-col">
            <span>2</span>
          </div>
          <div class="slds-col">
            <span>3</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.