Adding a footer

Anvil Q&A
5

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