Angular 6 router-outlet styling applied to element below it

Question

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.

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.

score 6 · Accepted Answer · answered Aug 01 '18 at 12:11

6

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)

answered Aug 01 '18 at 12:11

Guerric P

30,447
6
48
86

1

What's the workaround for this? If router-outlet is not styled, I can see the deactivated route component being shifted down before disappearing – mat.hudak Aug 01 '18 at 12:20
@dallows I answered the primary question "Why router-outlet styling is applied to element below it", but the final purpose is still unclear. Maybe post more code or even a StackBlitz to clarify – Guerric P Aug 01 '18 at 12:25
Makes sense, It answers my question. – mat.hudak Aug 01 '18 at 12:39
How did you do this? Could you fix the footer? – Mr. Mars Nov 06 '19 at 11:13

score 0 · Answer 2 · answered Apr 07 '20 at 21:02

I was working on an Ionic Project which primarily uses Angular, I wanted to style router outlet to follow my CSS grids applied, ion-router-outlet didn't work out, so I used router-outlet and it worked fine. Related to the question but not that specific, might help someone out there.

Angular 6 router-outlet styling applied to element below it

2 Answers2