I am envisioning a horizontal bar with items that are all the same width and evenly spaced apart. They can expand vertically as needed.
Check out the updated version here on StackBlitz
https://i.sstatic.net/MFfXd.png
Issue:
I am struggling to automatically set the width of the row elements. Currently, I have hardcoded a width value: width:200px, but I want the width to be determined by the number of elements per row.
Attempted Solution: I tried using elementRef in the Horizontile component to retrieve the width of each element:
currentWidth:number;
constructor(private el:ElementRef) {}
ngAfterViewInit(): void {
this.currentWidth=this.el.nativeElement.offsetWidth;}
However, this approach did not yield the desired result, and I believe it creates unnecessary coupling between components.
Upon further inspection, I discovered that setting width:inherit; in the CSS of the individual tile component allows me to dynamically adjust the width from the horizontal list component:
<app-tile [style.width.px]="0.9*currentWidth/nDisplayedTiles" [tile]="item"></app-tile>Unfortunately, since the currentWidth is initially zero, this solution does not work as anticipated.
I also attempted to use percentages for the width calculation, but the inherits CSS property retains the percentage value instead of adjusting accordingly. Why does the app-tile styling not respond to changes when inherits is not utilized?
Additionally, applying ViewEncapsulation did not provide the desired outcome either.
Although this may seem like a minor issue, I feel like I might be overlooking something simple. Any insights or suggestions would be greatly appreciated.