3

Problem: In custom community template footer is just last component, and it is not fixed to the bottom of a screen, but sticks to upper component and looks ugly when main content fills half of screen.

I don't want to use css with position:fixed because it will make footer appear always and on top of content.

Does anybody know a solution for this problem?

Improve this question
5
  • 'footer appear always and on top of content.' you will probably need to change other css rules, not just apply position:fixed. as is, without seeing your code, there might be more than one solution and could be flagged as 'Too Broad'
    – glls
    Commented Oct 25, 2018 at 14:49
  • Not sure if this will help but you can try slds-docked-form-footer
    – Hemavantha Rajesh Varma Mudunu
    Commented Oct 25, 2018 at 16:28
  • @glls by "on top of content" means that if content is larger than screen height, footer does not go to the bottom of content, but to the bottom of device screen. So it is always visible.
    – Vladyslav K
    Commented Oct 25, 2018 at 17:55
  • @glls nevermind, already found a solution. will post an answer a bit later
    – Vladyslav K
    Commented Oct 25, 2018 at 18:31
  • @glls It's not a too broad problem - the exact same thing happened to me and it was somewhat annoying to get it right. See answer below.
    – Caspar Harmer
    Commented Oct 25, 2018 at 22:47

2 Answers 2

Reset to default
4

Here is a solution that worked for me. I took idea from this article: https://css-tricks.com/couple-takes-sticky-footer/ Since adding wrapper is not an option with standard template, my solution was to choose calc().

In community template DOM structure looks like this:

<body>
    <div id="CommunityTemplate">
        <div class="cHeaderWrapper">...</div>
        <div class="cCenterPanel">...</div>
        <div class="cFooterPanel">...</div>
    </div>
</body>

header and footer have fixed height and using calc() I could specify min-height for content block like this:

.cCenterPanel {
  min-height: calc(100vh - 70px);
}
.cFooterPanel {
  height: 50px;
}

And some media queries for different screens.

Improve this answer
1
  • if you add this to .body and .footer with !important in your css overrides, it works. it did not work for me with the classes mentioned but maybe they changed it by now.
    – interesting-name-here
    Commented Jun 4, 2020 at 13:18
3

I encountered this exact problem and solved it by using a single column, single row layout for all my pages. Like this:

<aura:component implements="forceCommunity:layout" description="Custom Content Layout" access="global">
  <aura:attribute name="content" type="Aura.Component[]" required="false"/>
  <div class="contentPanel">
    {!v.content}
  </div>
</aura:component>

Then on each page component I put my custom header and footer components. It just occurred to me that I may be able to put these header and footer components on the above layout, with some css tweaking.

The header component:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
  <div class="custom-footer ">
    <div class="" style="width:100%">
     <img src="/sfsites/c/resource/YourImage" style="height:27px;" />
    </div>
  </div>
</aura:component>

The footer css:

.THIS.custom-footer {
  height: 122px;
  background-color: #f00;
  text-align: center;
  align-items: center;
  margin-top: auto;
  width: 100%;
  flex: 0 0 auto;
}

I then carefully structured my page components to flex like this:

<div class="custom-main">
    <c:my_LoginHeader />
    <div class="custom-content">
      <!--main content here-->
    </div>
    <c:my_LoginFooter />
</div>

With css like this:

.THIS .custom-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.THIS .custom-content {
  max-width: 700px;
  margin: auto;
  width: 100%;
}

This structure means I can have a 100% width footer but still manipulate the inner content independently.

It's been working well, but I may try moving it into the theme component as I mentioned. How did you do it (I'd be very interested to see, esp if it's more elegant).

Improve this answer

You must log in to answer this question.

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