Guide for implementing overflow-y on a router-outlet in Angular

Question

Guide for implementing overflow-y on a router-outlet in Angular

I am a newcomer to bootstrap and angular, so I'm unsure where I may have made a mistake...

Here is the current situation:

Initially, I utilize a router-outlet to showcase either a login-page or the "workspace".

<app-header ></app-header>
<router-outlet></router-outlet>

within the "workspace":

<div class="d-flex flex-row" >
   <app-side-navigation> </app-side-navigation>
   <div #needOverflow class=" m-0 overflow-auto" >
      <router-outlet></router-outlet>
   </div>
</div>

the second router-outlet includes a component that requires overflow-y: auto

Unfortunately, the overflow-auto from Bootstrap does not seem to work!

This is how the application appears

When I try setting the height of div#needsOverflow to 600px, I notice that the overflow does not extend all the way to the end of my screen. How can I make it reach across the entire screen? I attempted using height = 100vh but this proved too large due to my header.

My goal is for the 2nd router-outlet to have overflow-y only when the content exceeds the screen size, In simpler terms, it's fine for my side-nav and header to remain fixed in place

I also experimented with mat-sidenav, however, I encountered numerous issues likely stemming from the header

css angular bootstrap-4 overflow

Answer 1

Answer №1

I was able to resolve the entire issue by incorporating a directive!

Here is the updated code in app-component html:

<app-header viewportheight></app-header>
<div>
  <router-outlet></router-outlet>
</div>

The new viewportheight.directive implementation:

@Directive({
 selector: '[viewportheight]'
})
export class ViewportheightDirective implements AfterViewChecked {

 constructor(private el: ElementRef ,private viewportHeight: ViewportheightService) { }

 ngAfterViewChecked(): void {
   this.sendSizeToService();
 }


 @HostListener('window:resize')
 onResize(){
   this.sendSizeToService();
 }

 sendSizeToService(){
   this.viewportHeight.headerheight.next(this.el.nativeElement.offsetHeight)
 }
}

In workspace.html:

<div class="d-flex flex-row  " >
  <app-side-navigation class="align-self-start"> </app-side-navigation>

  <div class="overflow-auto p-3 w-100"  [ngStyle]="{'height': 'calc(100vh - ' + height + 'px)'}">
        <router-outlet></router-outlet>
  </div>

</div>

The variable height is now subscribed to a BehavourSubject in my viewportheightService.

Answer 2

I was able to resolve the entire issue by incorporating a directive!

Here is the updated code in app-component html:

<app-header viewportheight></app-header>
<div>
  <router-outlet></router-outlet>
</div>

The new viewportheight.directive implementation:

@Directive({
 selector: '[viewportheight]'
})
export class ViewportheightDirective implements AfterViewChecked {

 constructor(private el: ElementRef ,private viewportHeight: ViewportheightService) { }

 ngAfterViewChecked(): void {
   this.sendSizeToService();
 }


 @HostListener('window:resize')
 onResize(){
   this.sendSizeToService();
 }

 sendSizeToService(){
   this.viewportHeight.headerheight.next(this.el.nativeElement.offsetHeight)
 }
}

In workspace.html:

<div class="d-flex flex-row  " >
  <app-side-navigation class="align-self-start"> </app-side-navigation>

  <div class="overflow-auto p-3 w-100"  [ngStyle]="{'height': 'calc(100vh - ' + height + 'px)'}">
        <router-outlet></router-outlet>
  </div>

</div>

The variable height is now subscribed to a BehavourSubject in my viewportheightService.

Guide for implementing overflow-y on a router-outlet in Angular

Answer №1

Similar questions

Using Angular 13 causes Bootstrap 5 dropdowns to not open as expected

Using the ternary operator in various CSS rules

Challenges in handling asynchronous data within static JSON objects in Angular2

The click event is activated following the :active selector being triggered

In-depth CSS Reset for specific tags

Tips on updating the arrow icon after clicking on a dropdown menu

Guide on altering the bar colors based on their values with the help of the ApexCharts library and the Angular framework

What is the reason for the ineffectiveness of percentage padding/margin on flex items in Firefox and Edge browsers?

Text enclosed within a two-column div displayed in a single line

Troubleshooting Cors Problem between Angular 2 Form Data and Express

I'm curious as to why I am receiving an empty array as a response when I send a post request to the API

What steps should I take to design a polished PDF document?

Unique custom navigation bar (priority menu) crafted with Bootstrap 5 without any reliance on JQuery technology

What is the best way to adjust the size of the initial text field in a Bootstrap input group

The exception org.openqa.selenium.NoSuchElementException occurs when the specified element cannot be found on the web page

Encountering a compilation error while compiling using Angular Ivy

Visual Studio is not recognizing at-rules

When the value equals 25

Achieve uniform display across browsers: Implement Chrome's overflow ellipsis feature on Firefox

The lower div is overlapping the upper div in a smaller viewport