I am having issues with the alignment of my div elements, as they are either stacking behind or on top of each other.
td {
width: 14.28%;
height: 16.6%;
position: relative;
}
.details {
position: absolute;
display: none;
background-color: gray;
overflow: visible;
border: 2px solid black;
}
div:hover > .details {display: block;}<table>
<tr>
<td *ngFor="let cell of ukeEn()">
{{cell.text}}
<div class="outer" *ngIf="datoerContains(cell) != null">
<div class="circle" *ngFor="let circle of datoerContains(cell)"></div>
<div class="details" *ngFor="let circle of datoerContains(cell)">
{{circle.skole}} <br>
{{circle.kommentar}} <br>
SFO: {{circle.sfodag}}
</div>
</div>
</td>
</tr>
</table>The issue I'm facing is related to the details class. When using *ngFor, multiple div elements are generated but only one is visible while others remain hidden.
Any suggestions? I plan to experiment with displaying them next to each other and below each other without removing the absolute positioning from the .details class which serves another purpose.