Search code examples
htmlangularsassangular-animations

Angular 6 router-outlet styling applied to element below it

I'm in a phase of adding router transitions to the angular application and I'm facing weird problem. Styling for router-outlet gets applied to the element below it in the DOM hierarchy.

Here's my code:

<main role="main">
  <!-- Header -->
  <app-header class="topnavbar-wrapper"></app-header>
  <!-- Page content-->
  <div [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
    <router-outlet #o="outlet"></router-outlet>
  </div>
  <!-- Footer -->
  <app-footer></app-footer>
</main>

Styling:

main {
  box-sizing: border-box;
  margin-top: 4.5rem;
  min-height: 92vh;
  padding-bottom: 4rem;
  /* Height of footer */
  position: relative;
}
router-outlet ~ * {
  position: absolute;
  height: 100%;
  width: 100%;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: $secondary;
}

Animations work smoothly, I have no problem with that. But the router-outlet styling is applied to element below it and this makes footer fixed at the bottom, overlaying the content. If I clear styling of router-outlet element then animation won't work correctly.

This happens

As you can see on the screen <app-overview> element has router-outlet styling which is what causes the problem. I guess that solution lies in correct scss styling but so far I wasn't able to figure it out.

Solution

  • The selector router-outlet ~ * selects all of the router-outlet siblings, that's why it applies on app-overview.

    Also you shouldn't try to style a router-outlet since it is not rendered (it's just a placeholder)