Topic: Sticky footer overlaps main content

Lustig priority asked 2 years ago


Expected behavior I am using the angular version of the mdb footer. it is sticky, so that it stys always at the bottom.

Actual behavior the footer overlaps the content. the problem is that this causes the site to be unusable at some parts. I tried to use a padding on the container i use for main content, but nothing works. I think this is also important for other users. Thanking you very much in advance for help. best regards Thomas

Resources (screenshots, code snippets etc.) using information from documentation: https://mdbootstrap.com/docs/angular/navigation/footer/

<!-- main app container -->
<div class="app-container pb-10" style="height: 100vh; padding-bottom: 10em;">
    <alert></alert>
    <router-outlet></router-outlet>
</div>

<!-- footer -->
<footer class="page-footer font-small fixed-bottom" style="background-color: #144762;">
  <div class="container text-center">

    <div class="row">
      <div class="col-6 col-md-3 mx-auto">
        <a [routerLink]="['/legalinfo/termsofservice']" routerLinkActive="active" mdbWavesEffect>Terms</a>
      </div>
      <div class="col-6 col-md-3 mx-auto">
        <a [routerLink]="['/legalinfo/privacy']" routerLinkActive="active" mdbWavesEffect>Privacy</a>
      </div>
      <div class="col-6 col-md-3 mx-auto">
        <a [routerLink]="['/legalinfo/imprint']" routerLinkActive="active" mdbWavesEffect>Imprint</a>
      </div>
      <div class="col-6 col-md-3 mx-auto">
        Copyright &copy; Demo
      </div>
    </div>
  </div>
</footer>

Arkadiusz Idzikowski staff commented 2 years ago

Please take a look at the solution I proposed in this topic and let me know if that helped: https://mdbootstrap.com/support/angular/how-can-i-locate-a-footer-at-the-bottom-of-the-page/


Lustig priority commented 2 years ago

thanks for the reply, i tried the example - the padding-bottom is applied, but has absolutely no effect. in my index.html i do have the following syntax: Loading...


Arkadiusz Idzikowski staff commented 2 years ago

@Lustig in this case we would need some more information about the full HTML/TS/CSS code you used to create the layout or a simple demo on which we will be able to reproduce the problem (you can send it to a.idzikowski@mdbootstrap.com).



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes