Sticky Footer - MFE Learning - Page Loading

Development
1

Does anyone know how we can make a sticky footer for the MFE frontend-app-learning when the page loads? This could be any MFE, we would really just like the footer to stay on the bottom before the content loads.

image
image1301×1401 31.9 KB

After adjusting this value to say 89vh I was able to get this to look somewhat decent. I’m just not sure this is the best way to handle this. Please advise.

frontend-app-learning/src/generic/PageLoading.jsx at open-release/palm.master · openedx/frontend-app-learning (github.com)

image
image1261×770 59.2 KB

cc @AdamStankiewicz @arbrandes

2

Because we’re using display: flex on the root id, I tried setting the following but the sticky footer doesn’t work as expected.

div#root {
   display: flex;
   flex-direction: column;
}

/* main content that needs to expand.*/
div#root div div {
   flex-grow: 1;
   flex-shrink: 0;
}

footer .footer {
   flex-shrink: 0;
}

I get this warning message about the main content CSS values not loading because a parent element has display: block instead of display: flex. It appears the div#root div div is set to display: block.

image

3

Sticky footer would also be nice to have on the Course Home outline page. White space is present below the footer.

image
image1243×1326 90.6 KB

4

Hi @Zachary_Trabookis ,

This can be achieved with the below css properties. This can work on learner-dashboard, account, learning MFE and not on profile MFE.

#root > div{
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

main{
   flex-grow: 1;
}


/* for profile MFE, we have to use #root instead of #root > div */
#root { 
   ...
}

That’s the best way to do this without any side effects. When the content in main expanded, then the footer will automatically adjust to the bottom with the scroll as it’s now.

You can add the above code to the brand-openedx package as it’s used to override styling (In this case, you don’t need to clone/make changes in MFE code). Otherwise, you can add classes d-flex, flex-column, flex-grow-1 and style: min-height: 100vh in your MFEs.

1 Like
5

Thanks for you help @hinakhadim! You solution does seem to work. I appreciate this and thanks for recommending the brand-openedx package as well.

1 Like
6

@hinakhadim
For the page load example above I could not use the brand-openedx page and had to update the inline style height to the following setting to get the sticky footer to work. The height used to say 50vh. Any suggestions on a work around for this using the brand-openedx package? It appears that the @import "~@edx/brand/paragon/overrides"; happen on frontend-app-learning/src/index.scss which gets loaded after the page load is complete, so any CSS updates in brand-openedx won’t apply to page load.

// frontend-app-learning/src/generic/PageLoading.jsx

  render() {
    return (
      <div>
        <div
          className="d-flex justify-content-center align-items-center flex-column"
          style={{
            height: '89vh',
          }}
        >
          <Spinner animation="border" variant="primary" screenReaderText={this.renderSrMessage()} />
        </div>
      </div>
    );
  }
7

Seems like we can’t have any workaround for it. As the div has all generic classes. Changing within code is the only solution which you’ve implemented.

1 Like