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
Andrew Aldis 15Andrew Aldis 15 

lighting component with a sticky header/footer

Is there a way to create a lightning component with a static header and footer that stay at the top even when the user is scrolling.  I need it to work in mobile more that desktop.  If not are there any work arounds?
NagendraNagendra (Salesforce Developers) 
Hi Andrew,

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>
There is now a standard utility class for making a div scrollable. The documentation can be found here:  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>
For more information please refer to below link. Hope this helps.

Kindly mark this as solved if the reply was helpful.

Thanks,
Nagendra
 
srinivasa reddy 60srinivasa reddy 60
Hi Andrew,

If we customize the whole dialog we can put sticky header and footer and also the contet can be scrollable.
Please refer to this website : Custom Quick Action with sticky header and footer (http://www.sfdcbox.com/2018/07/customize-width-header-and-footer-for.html)
It worked for me .

Thanks 
Srinivas
Guilherme Oliveira 25Guilherme Oliveira 25
I passed through the same question recently and I'll share how I solved it.
In my case, I had an aura component button that calls a lightning:flow (screen flow)  when clicked. 

The header is pretty straightforward, in the aura component button, you will have to create the modal box. Eg.: 
<div class="slds-modal__container">
    <header class="slds-modal__header"></header>
<div>
<div class="slds-modal__content slds-p-around_medium">
    <lightning:flow aura:id="auraId" onstatuschange="{!c.handleStatusChange}"/>
</div>
The header will be fixed for the screen flow and that's all.

For footer, you have to create custom aura component that will replace the functionality of the flow navigation. Just copy and paste from this link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_flow_screens_replace_footer.htm

Then, remove the standard footer in the screens of the flow, and add the custom button instead.

Now the tricky to sticky the footer in the modal:

Still in the custom footer flow component, create the following CSS (you can customize to adjust in your needs):
  
.THIS.slds-card__footer {
    position: absolute;
	background-color: white;
	width: 100%;
	border-top-color: var(--sds-c-modal-color-border, var(--lwc-colorBorder,rgba(242, 126, 46, 0.26)));
	left: 0%;
	border-bottom-left-radius: var(--sds-c-modal-radius-border, var(--lwc-borderRadiusMedium,0.25rem));
	border-bottom-right-radius: var(--sds-c-modal-radius-border, var(--lwc-borderRadiusMedium,0.25rem));
	padding-right: 30px;
}

Please note that this CSS refer to a class "slds-card__footer". This class needs to be applied in the in the component you have just created:
  
<div aura:id="actionButtonBar" class="slds-card__footer">

Create a helper that will calculate the position of the footer: 
setFooterSize: function(component) {
    var modal = document.querySelector('.slds-modal');
    var content = document.querySelector('.slds-modal__content');
        
    component.find('actionButtonBar').getElement().style.top = (modal.clientHeight / 2 + content.clientHeight / 2) + 'px';
}
 Call the helper function from afterRender, this way, every time the flow changes for the next page, or some validation rule is applied, the footer position will be recalculated: 
afterRender: function (component, helper) {
    this.superAfterRender();
        
    helper.setFooterSize(component);
}
Finally, in the controller, add in the init funtion a listerner to window resize, this way the footer will be repositioned automatically on browser resize. 
window.addEventListener('resize', $A.getCallback(function() {
    helper.setFooterSize(component);
}));

Hope it helps.
Guilherme