I am trying to achieve a layout similar to the one shown in the image. A container can have multiple elements starting within it or no elements at all. The elements always have a fixed height, and the container's height is determined by the number of elements. If there are no elements, the height is the minimum; if there is more than one element, the height must be sufficient to cover that element (with each element having a height of 40px) plus half of the next element.
In the illustration:
- Elements 1 and 2 start in container 1;
- Elements 3 and 4 start in container 2;
- Containers 3 and 4 do not have any elements starting within them (so they should have the minimum height).
<div class="all">
<div class="conts" *ngFor="let cont of container; let i = index">
<div class="cont" [ngStyle]="{'height': cont.numberOfElements + 'px'}">
C{{i}}
</div>
</div>
<div class="test">
<div class="els" *ngFor="let elm of el; let i = index">
<div class="el">
El{{i}}
</div>
</div>
</div>
</div>
.all {
width: 100%;
height: 100%;
}
.test {
position: absolute;
top: 10px;
left: 40px;
}
.els {
display: flex;
width: 100%;
justify-content: center;
}
.el {
display: flex;
align-items: center;
justify-content: center;
margin-right: 80px;
height: 40px;
width: 40px;
border: 1px solid blue;
}
.const {
display: flex;
width: 100%;
justify-content: center;
}
.cont {
display: flex;
align-items: center;
justify-content: left;
min-height: 40px;
height: var(--height);
}
.conts:nth-child(odd) {
background-color: green;
}
.conts:nth-child(even) {
background-color: red;
}
el = [
{start: new Date('1/1/2020')},
{start: new Date('1/1/2021')},
{start: new Date('1/1/2022')},
{start: new Date('1/1/2023')}
]
container = [
{start: new Date('1/1/2019'), end: new Date('1/5/2021'), numberOfElements: 40*1},
{start: new Date('1/5/2021'), end: new Date('1/5/2023'), numberOfElements: 40*0},
{start: new Date('1/5/2023'), end: new Date('1/6/2023'), numberOfElements: 40*2},
{start: new Date('1/6/2023'), end: new Date('1/1/2024'), numberOfElements: 40*1}
]