In my current setup, I have 2 interconnected div elements. The left div contains a list of images while the right div displays the details of each image. By clicking on an image in the left div, the right div expands and shows the corresponding information. However, I am facing a challenge with the positioning of the divs.
My goal is to dynamically adjust the heights of both divs so that they always match in size. This means that regardless of the content, whether there is only one large image on the left or multiple images resulting in different heights, I want the divs to be consistent in height. I attempted a solution but it did not yield the desired result:
leftHeight: number;
rightHeight: number;
ngDoCheck() {
if (window.innerWidth < 1336 && this.openDetails) {
this.chRef.detectChanges();
if (this.leftElement.nativeElement.clientHeight > this.rightElement.nativeElement.clientHeight) {
this.rightHeight = this.leftElement.nativeElement.clientHeight;
} else {
this.leftHeight = this.rightElement.nativeElement.clientHeight;
}
this.chRef.detectChanges();
}
}
Here is the HTML structure being used:
<div class="wrapper">
<div class="left-part" #leftElement [style.height.px]="leftHeight - 40">
<!-- Images from ngFor loop -->
</div>
<div [@focusPanel]='smallScreen' *ngIf="openDetails" #rightElement class="right-part" [style.height.px]="rightHeight - 65">
<!-- Details of each image -->
</div>
</div>
I am seeking suggestions for a more effective approach to handle this issue and ensure the dynamic adjustment of div heights based on their content.
UPDATE: While my initial implementation sets the height of the elements initially, it fails to recalculate and adjust the height dynamically as the content changes.