Angular routing appears to be preventing scrolling

Question

I have set up an angular app with routing and the problem I've run into is that the individual components seem unable to scroll.

In my index.html file, I have

<app-root><div class="loading"></div></app-root>

Then in my app.component.html, I have

<router-outlet></router-outlet>

Then I have my various components. I have found that I get scrolling functions if I replace the given code with a long paragraph in either app.component.html or index.html but I get no scrolling if I place the paragraph in any of the sub-component HTML files. I'm very new to angular/frontend so even pointing me the direction to look would be very helpful because my development is stagnated until I figure this out.

Also if there are any other files that I could post that would be helpful to see please ask.

Answer 1

The problem I was having was that in my styles.css folder I needed to add

.form-container { 
  position: absolute;
}

And in my router.animations.ts file I needed to change the 'fixed' to 'absolute'

export function moveIn() {
  return trigger('moveIn', [
    state('void', style({position: 'fixed', width: '100%'}) ),
    state('*', style({position: 'fixed', width: '100%'}) ),
    transition(':enter', [
      style({opacity:'0', transform: 'translateX(100px)'}),
      animate('.6s ease-in-out', style({opacity:'1', transform: 'translateX(0)'}))
    ]),
    transition(':leave', [
      style({opacity:'1', transform: 'translateX(0)'}),
      animate('.3s ease-in-out', style({opacity:'0', transform: 'translateX(-200px)'}))
    ])
  ]);
}

after

export function moveIn() {
  return trigger('moveIn', [
    state('void', style({position: 'absolute', width: '100%'}) ),
    state('*', style({position: 'absolute', width: '100%'}) ),
    transition(':enter', [
      style({opacity:'0', transform: 'translateX(100px)'}),
      animate('.6s ease-in-out', style({opacity:'1', transform: 'translateX(0)'}))
    ]),
    transition(':leave', [
      style({opacity:'1', transform: 'translateX(0)'}),
      animate('.3s ease-in-out', style({opacity:'0', transform: 'translateX(-200px)'}))
    ])
  ]);
}