3

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?

1 Answer 1

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>
5
  • Thanks Kyle. I thought there was a SDLS class but this does what I need. Cheers mate. Sep 11, 2015 at 7:29
  • 1
    SLDS actually supports setting up scrollable divs: lightningdesignsystem.com/components/utilities/scrollable/… Jan 8, 2017 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, 2017 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, 2018 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, 2018 at 20:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .