Sticky BottomPlaceholder

Question

Is there anyway to make a bottomPlaceholder footer (using ApplicationCustomizer) sticky? The footer I am making is rather large and cannot be on the screen all the time.

Answer 1

1. A class that derives from the ApplicationBaseCustomizer class
2. Use of the this.context.placeholderProvider.tryCreateContent() method to get a reference to the appropriate placeholder and it’s content - and the fact that it gives you the DOM element to manipulate (e.g. set innerHTML)

You could refer below code:

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer, PlaceholderContent, PlaceholderName, PlaceholderProvider
} from '@microsoft/sp-application-base';

import * as strings from 'Cob12ApplicationCustomizerStrings';
import styles from './AppCustomizer.module.scss';
import { escape } from '@microsoft/sp-lodash-subset';

const LOG_SOURCE: string = 'COBApplicationCustomizer';
const FOOTER_TEXT: string = "This is the bottom zone";

// used if you wish to pass properties to your extension..
export interface ICob12ApplicationCustomizerProperties {
  TopContent: string;
}

export default class Cob12ApplicationCustomizer
  extends BaseApplicationCustomizer<ICob12ApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    console.log("onInit: Entered");

    console.log("Available placeholders: ",
      this.context.placeholderProvider.placeholderNames.join(", "));


    // bottom placeholder..
    let bottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
    if (bottomPlaceholder) {
      bottomPlaceholder.domElement.innerHTML = `<div class="${styles.app}">
                  <div class="ms-bgColor-themeDark ms-fontColor-white ${styles.footer}">
                    <i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i>&nbsp; ${escape(FOOTER_TEXT)}
                  </div>
                </div>`;
    }

    return Promise.resolve<void>();
  }
}

And the CSS is implemented by adding an SCSS file in your extension’s directory - named AppCustomizer.module.scss(in this code) and has the following content:

.app {
  .footer {
    height:60px;
    text-align:center;
    line-height:2.5;
    font-weight:bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkgreen;
  }
}

Remember this is imported to the class for your customizer e.g:

import styles from './AppCustomizer.module.scss';

Reference

Update: Try below CSS:

    .footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}