MutationObserver not detecting Height changes

Question

I have a container with header and main block inside, like this

...

And my goal is to detect #header height changes and set height to #main component. So you can imagine,

the whole #container is - 100%, 
#header, for example, 50px,  
and el inside #main block should be `100% - 50px`

And everything works almost fine, except, on the left part of the page I have sidebar which can be opened or collapsed, so window is not resized, but header will change it's height depends on that, but my MutationObserver doesn't detect it.

This detailsHeader change it's height in css as max-height: 150px;,(so while sidebar collapsed header height 50px, if opened - expands to 150) and I think thats the reason, but maybe I miss something. Here's some part of my code: service

setupHeightMutationObserver(el: ElementRef): Observable {
    const observerable$ = new Observable(observer => {
      const callback = () => observer.next(this.getHeightAndWidthObject(el));
      const elementObserver = new MutationObserver(callback);
      const config = { attributes: true, childList: true, subtree: true };
      elementObserver.observe(el.nativeElement, config);
    });

    return observerable$
      .pipe(
        debounceTime(50),
        distinctUntilChanged()
      );
  }

private getHeightAndWidthObject(el: ElementRef): HeightAndWidth {
    const newValues = new HeightAndWidth();
    newValues.height = el.nativeElement.getBoundingClientRect().height;
    newValues.width = el.nativeElement.offsetWidth;
    return newValues;
  }

component

@ViewChild('details') private details: ElementRef;
@ViewChild('detailsHeader') private detailsHeader: ElementRef;

  ngAfterViewInit(): void {
    this.subscription$ = this.elementResizeService.setupHeightMutationObserver(this.detailsHeader)
      .subscribe((newValues: HeightAndWidth) => this.calculateChartSize(newValues));
  }

calculateChartSize(newValues: HeightAndWidth): void {
    const detailsHeader = this.elementResizeService.doDivHeightChange(newValues);
    const detailsHeight = this.details.nativeElement.getBoundingClientRect().height;
    const height = detailsHeight - detailsHeader.height - 10;
    this.chartHeight = height;
  }

  ngOnDestroy(): void {
    this.subscription$.unsubscribe();
  }

user_2494754 · Answer

Alright, you specified that you can't use the resize Observer api.

Another possibility is to attach a resize event on the window object. And then read your particular element dimensions at this moment.

This is untested in IE. But It looks supported since IE4.

https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

And does not work well as a snippet here (Try to either resize, zoom, go full page, or resize your console to trigger the alert()).

Notice the use of % and vh css units, does not matter, this is to show that the result is in pixels anyway.

window.addEventListener("resize", getSizes, false)
        
function getSizes(){
  let header = document.getElementById("header")
  alert(header.clientWidth +"px x "+ header.clientHeight + "px")
}

#header {
  width: 100%;
  height:12vh;
  border: 3px black solid;
}

MutationObserver not detecting Height changes

1 Answers