2

I'm using SLDS in a Lightning component, and I'm sure I've read somewhere that the page header can be made to stay fixed whilst the rest of the screen is vertically scrolled.

My page header looks like this:

<div class="slds-page-header">
    <p class="slds-text-heading--label">Contacts</p>
    <h1>My Contacts</h1>
</div>

Is there a class that I'm missing?

3

I don't think there is an SLDS class specifically that enables scrolling, however an easy way to enable this using standard CSS is to do the following:

<style>
    .scrollable {
        height: 400px; <!-- Don't need this if it's okay for height to be dynamic -->
        overflow-y:auto;
    }
</style>

<div class="slds-page-header">
    <p class="slds-text-heading--label">Contacts</p>
    <h1>My Contacts</h1>
</div>
<div class="scrollable">
    <!-- The rest of the page goes here -->
</div>

EDIT: As @techbusinessman wrote in a comment below, there is now a standard utility class for making a div scrollable. The documentation can be found here: https://www.lightningdesignsystem.com/components/utilities/scrollable/#overview

The code would now be as follows:

<div class="slds-page-header">
    <p class="slds-text-heading--label">Contacts</p>
    <h1>My Contacts</h1>
</div>
<div class="slds-scrollable">
    <!-- The rest of the page goes here -->
</div>
  • Thanks Kyle. I thought there was a SDLS class but this does what I need. Cheers mate. – John Davies Sep 11 '15 at 7:29
  • 1
    SLDS actually supports setting up scrollable divs: lightningdesignsystem.com/components/utilities/scrollable/… – techbusinessman Jan 8 '17 at 21:21
  • 1
    @techbusinessman, you are correct! Since I wrote this answer Salesforce has created a utility class to make a div scrollable. I will update my answer. – Kyle Jan 9 '17 at 22:17
  • may be a dumb query, but I tried the markup, but my VF Page Does not keep the slds-page-header fixed, it still scrolls along with rest of content. Is there something else that is needed to be done to make the header float like standard sfdc pages do? – VarunC Feb 26 '18 at 12:42
  • @VarunC If you are doing this on a VF page and not a lightning component, make sure to include the lightning design system using the <apex:slds /> component and wrapping your page in <div class="slds-scope">...</div> – Kyle Feb 26 '18 at 20:23

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.