Adding a footer

Is it possible to add a footer using the Nav/Content style of form building?

@stucork had a very useful solution. But when I edit the CSS to make it not pinned then it just adds a scrollbar for the content which is quite annoying. I’m sure there is a CSS solution here?

Alternatively, I thought about doing something like this, but the standard page (material design) has a built-in space at the bottom it seems.

    self.content_panel.add_component(Home(), full_width_row=True)
    self.content_panel.add_component(Footer(), full_width_row=True)

here’s a slightly edited version of that footer example with no pinning.

https://anvil.works/build#clone:UBZ6OOJB4ULVZTRI=S7W46VQRWGUWXLFA37FHP5HI

The footer should go to the bottom of the page or if there is more content it will go off the page (i.e. not sticky).

in this version you could dynamically add a footer like

self.add_component(Footer(), slot='footer-slot')

Let me know if it’s not quite what you’re after

6 Likes

Yep this is pretty much exactly it!

It’s easier to leave the footer on all pages, but it’s a pretty cool idea to be able to modularly build your pages with components. Feels very Wordpressy, ha!

1 Like

Hello @stucork, thank you for the example. I would like to add some info for the people who come here after me. From your answer, it was not clear to me what I had to do in order to actually get the footer into my project. As far as I understand it now, I had to the following changes.

  1. Add the following code into the Assets > standard_page.html:
    <div class="footer">
        <div class="footer-slot" anvil-slot="footer-slot">
            <div anvil-slot-if-empty="footer-slot" style="margin: 4px 0;"/>
            <div class="placeholder anvil-designer-only" anvil-if-slot-empty="footer-slot" anvil-drop-here>Drop a FlowPanel or Label or Link Component here</div>
        </div>
    </div> 
  1. Add the following code into Assets > theme.css:
    /* Footer bar */
    .footer {
      font-size: 20px;
      font-weight: 500;
      background-color:  %color:Primary 500%;;
      color: white;
      min-height: 66px;
    /*   height: 66px; */
      text-align: center;
      padding: 0 72px 0 72px;
       z-index: 1;
      box-shadow: 0 -4px 5px 0 rgba(0, 0, 0, 0.14), 0 -1px 10px 0 rgba(0, 0, 0, 0.12), 0 -2px 4px -1px rgba(0, 0, 0, 0.2);    
    }

    .footer > .footer-slot > .placeholder { outline: 1px dotted; padding-left: 16px; padding-right: 16px; margin-top: 12px; display:none; }
    .anvil-highlight .footer > .footer-slot > .placeholder { display:block; }
      
    .content > div:first-child{
    /*  adjusted for the footer  */
      min-height: calc(100vh - 130px);
    }

    .footer a, .footer a.anvil-component {
      padding: 5px;
    /*   margin: 8px 0 0; */
      border-radius: 20px;
    }

    footer a, .footer .anvil-component {
      display: block;
      color: white;
      line-height: 30px;
      min-width: 30px;
      min-height: 30px;
      margin: 4px 0;
    }
    .footer a:hover, .footer a:active {
      color: #eee; text-decoration: none;
      background-color: %color:Primary 700%;
    }
    .footer a .link-text {
      padding: 0 4px;
    }  

I have also found out there is a problem with your proposed footer styling in case you are using free version of Anvil because it does not take into an account the 50px shift caused by the Anvil banner. The footer therefore sticks out from the page even though the page is empty. It is caused by these two css rules:

body.anvil-show-banner {
     /* adds a 50px margin to fit in the banner */
    margin-top: 50px; 
}

.structure {
   /* squeezes the view by 50px */
   min-height: calc(100vh - 50px);  
}

In order to fix this, adjust the code we have just added into the theme.css like so:

.content > div:first-child{
 /*  adjusted for the footer  */
   min-height: calc(100vh - 180px);
 }

Anyways, thanks again for the example.

3 Likes

A quick note for anyone looking for a sticky footer, to update Stu Cork’s code…

I implemented the code earlier today and it’s great, visually does exactly what’s needed. Behind the scenes, however, my app started throwing a lengthy JS warning.

Had a pick through and it was just the HTML which needed a wash. If you want to use the sticky footer, update your standard page HTML or Stu’s clone app with:

<div class="structure">
  <div class="app-bar" anvil-drop-container=".anvil-container" anvil-drop-redirect=".placeholder">
    <a class="sidebar-toggle" anvil-if-slot-empty="top-left-btn" anvil-hide-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn" href="javascript:void(0)"></a> <a class="sidebar-toggle anvil-designer-only" anvil-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn"></a>
    <div class="top-left-btn" anvil-slot="top-left-btn"></div>
    <div class="title" anvil-slot="title">
      <div class="placeholder anvil-designer-only" anvil-if-slot-empty="title" anvil-drop-here="">
        Drop title here
      </div>
    </div>
    <div class="app-bar-nav" anvil-slot="nav-right">
      <div class="placeholder anvil-designer-only" anvil-if-slot-empty="nav-right" anvil-drop-here="">
        Drop a FlowPanel here
      </div>
    </div>
    <div style="clear:both"></div>
  </div>
  <div class="nav-holder">
    <div class="left-nav anvil-measure-this" anvil-slot-repeat="left-nav" anvil-drop-container="&gt;.anvil-container"></div>
    <div class="left-nav-placeholder anvil-designer-only" anvil-if-slot-empty="left-nav" anvil-drop-slot="left-nav">
      <div class="prompt">
        To add a sidebar, drop a ColumnPanel here.
      </div>
    </div>
    <div class="content">
      <div anvil-slot-repeat="default" class="anvil-measure-this"></div>
      <div class="placeholder drop-here" anvil-if-slot-empty="default" anvil-drop-slot="default">
        Drop a ColumnPanel here.
      </div>
      <div class="footer">
        <div class="footer-slot" anvil-slot="footer-slot">
          <div anvil-slot-if-empty="footer-slot" style="margin: 4px 0;"></div>
          <div class="placeholder anvil-designer-only" anvil-if-slot-empty="footer-slot" anvil-drop-here="">
            Drop a FlowPanel or Label or Link Component here
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="nav-shield"></div>
</div>
<div anvil-drop-default="" anvil-drop-redirect=".placeholder" anvil-drop-container=".anvil-container"></div>

And, as if by magic, the warning will disappear.

2 Likes