cssangularmdbootstrap

mdb navbar keeps flipping height

I have a mdb navbar in my Angular app but the height of the navbar seems to flip to a bigger one randomly when reloading the page (Sometimes it keeps height, some other time it has increased height). Also, as soon as I open the developer console in Chrome the size adjusts back to normal which makes it hard to find the issue.

The following screenshots show 1.) how it should look like all the time and 2.) how it is displayed sometimes when I refresh the page:This is the navbar how it should look like how it looks like sometimes

My navbar is in a separated Angular component which I add to the app.component.html as it shows here:

<app-header></app-header>
<div class="d-flex p-2 justify-content-center">
  <router-outlet></router-outlet>
</div>

The header itself is also pretty simple and looks almost like the provided example of mdb

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo" [containerInside]="false">
  <mdb-navbar-brand>
    <a class="navbar-brand" [routerLink]="'/dashboard'">Admin Console</a>
  </mdb-navbar-brand>
  <links>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/dashboard'">Dashboard</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">Users</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">A</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">B</a>
      </li>
    </ul>
    <span class="fill-remaining-space"></span>
    <ul class="navbar-nav ml-auto">
      <li *ngIf="!authService.isLoggedIn" class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/sign-in'">Login</a>
      </li>
      <li *ngIf="authService.isLoggedIn" class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect (click)="this.authService.signOut()">Logout</a>
      </li>
    </ul>
  </links>
</mdb-navbar>

I tried adding sticky-top as Sideclass which seems to improve the behavior when fixed content is inside the router-outlet. But as soon as I navigate to a component which feeds something more dynamic like a table into the router-outlet it happens again like shown here:

![enter image description here

Any idea how to keep the navbar from growing? Thank you!

Solution

  • This seems to be a bug in the component but I found out how to work around. Apparently the div injected into nav has a style with is used for controllig the height when drop-down is active. This height is meant to be increased only in case of an active drop-down but in my case it got increased sporadically. So I used this CSS to limit the max-height of the navbar when it is not in drop-down mode:

    :host ::ng-deep mdb-navbar nav div :not(.show) {
    max-height: 40px !important;
}