I have a container with header and main block inside, like this
<div #container class="container">
<div #header class="header">...</div>
<div class="main">
<lp-chart [chartHeight]="chartHeight"></lp-chart>
</div>
</div>
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<HeightAndWidth> {
const observerable$ = new Observable<HeightAndWidth>(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();
}
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; }
<div id="header"> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.