Fit child element to screen size without overflow with css or Angular

Question

I have a big parent element that contains multiple childs elements and the parent has overflow-y: auto. When the screen size is small (400 px to 700 px) I want that one of the child component will fit to the screen size, and only the child component will be seen (without overflow).

At the beginning I thought doing it with media queries. The problem is that in media queries:

@media (min-width: 400px) and (max-width: 700px) {
   //
}

It takes the window innerWidth. I saw that what I need is something like window.outerWidth (the screen size and not the content size inside the browser window).

So, I tried using:

    @HostListener('window:resize', ['$event'])
private onResize(): void {
    const outerWidth: number = window.outerWidth;
    const smallScreenClassName: string = 'small-screen';
    const isContainSmallScreen: boolean = this.el.nativeElement.classList.contains(smallScreenClassName);

    this.el.nativeElement.style.width = "";

    if (outerWidth >= 400 && outerWidth <= 700) {
        this.el.nativeElement.classList.add(smallScreenClassName);
        this.el.nativeElement.style.width = `${outerWidth}px`;
    }
    else if (isContainSmallScreen) {
        this.el.nativeElement.classList.remove(smallScreenClassName);
    }
}

But this is not good enough because I found that the outerWidth is not precise, sometimes the child component doesn't fit to the screen.

Is there any better way to do what I am trying to do?

Answer 1

I had a similar use-case for redrawing some d3 charts when the window was resized. In the end I set up a separate service to detect the initial screen size and monitor changes:

import { Injectable } from '@angular/core';
import { Observable, fromEvent } from 'rxjs';
import { map, debounceTime, startWith } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class WindowResizeService {
  windowSize$: Observable<WindowDimensions>;
  windowInit$: Observable<Event>;

  constructor() {
    this.windowSize$ = fromEvent(window, 'resize').pipe(debounceTime(100),
      map(event => {
        return { width: (event.target as Window).innerWidth, height: (event.target as Window).innerHeight };
      }),
      startWith({ width: (window as Window).innerWidth, height: (window as Window).innerHeight }),
    );
  }

}

export interface WindowDimensions { width: number; height: number; }

Then you can subscribe to this from your component and make any necessary adjustments to your layout accordingly, based on the value of resize.

import { Subscription } from 'rxjs';
import { WindowResizeService } from './window-resize.service';

constructor(private windowResizeService: WindowResizeService) { }

windowResizeSub: Subscription;

ngAfterViewInit() {
  this.windowResizeSub = this.windowResizeService.windowSize$.subscribe(resize => {
    // Make your layout adjustments here
    console.log(resize);
  });
}

ngOnDestroy() {
  if (this.windowResizeSub) {
    this.windowResizeSub.unsubscribe();
  }
}