Apex Code Development You need to sign in to do that
Don't have an account?
Need to create a Dynamic Fixed Footer as per page content in salesforce Lightning
I have created a custom lightning component with fixed footer content using slds-docked-form-footer, and it is working fine for 100% width page but when i am trying to reduce the page size then content goes up and footer is still fixed at bottom.
Markup Code -
<div class="slds-docked-form-footer">
<lightning:button class="myBtn" variant="brand" label="Save" title="Save" onclick="{! c.save }" />
<lightning:button class="myBtn slds-m-left_small" variant="brand" label="Cancel" title="Cancel" onclick="{! c.cancel }" />
</div>
Expected- I want that footer will fix at bottom with 100% width when page size is 100% and page content will be scrollabe except button like below detail page standard functionality.
Markup Code -
<div class="slds-docked-form-footer">
<lightning:button class="myBtn" variant="brand" label="Save" title="Save" onclick="{! c.save }" />
<lightning:button class="myBtn slds-m-left_small" variant="brand" label="Cancel" title="Cancel" onclick="{! c.cancel }" />
</div>
Expected- I want that footer will fix at bottom with 100% width when page size is 100% and page content will be scrollabe except button like below detail page standard functionality.
I already tried from above gievn link but still i didn't the solution to fix footer on page, but i Found solution for that.
If you want to fix footer on page as per standard layout, we can use these standard classes
<div class="slds-docked-form-footer stickyFooter bottomfooter">
</div>
Output is looking like that-
Regards,
Sangeet
All Answers
Can you try the css that was used in this link https://salesforce.stackexchange.com/questions/237281/how-to-make-sticky-footer-in-lightning-community to implement sticky footer,
Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.
Thanks.
I already tried from above gievn link but still i didn't the solution to fix footer on page, but i Found solution for that.
If you want to fix footer on page as per standard layout, we can use these standard classes
<div class="slds-docked-form-footer stickyFooter bottomfooter">
</div>
Output is looking like that-
Regards,
Sangeet