I am currently in the process of developing a website using Angular. I have implemented a card feature that allows for text selection from a menu on the left side. The texts are displayed using the *ngIf directive. However, I encountered an issue where if the first and lowest layer of text overflows and you try to scroll, it doesn't work because the other texts above it remain disabled by *ngIf.
Upon testing with only one layer of text, everything worked perfectly. Is there any way to ensure that the disabled texts controlled by *ngIf completely disappear so they do not obstruct scrolling on the lower layers?
Below is the HTML code snippet for the Card Component:
<div class="wrapper">
<div class="container">
<div class="item1">{{headLine}}</div>
<div class="item2">
<ul class="partList">
<a *ngFor="let i of array" (click)="onClickPart(i)" class="part{{i}}"><li>{{prefix}}{{i}}</li></a>
</ul>
</div>
<div *ngFor="let i of array" class="item3">
<p *ngIf="part == i">{{texts[i-1]}}</p>
</div>
<div class="item4"><img src="../../assets/Spartans2.jpg" alt=""></div>
</div>
Here is the relevant CSS code snippet which utilizes Grid Display to style the Card. Feel free to disregard the comments:
.container {
display: grid;
grid-template-columns: 70px 140px 140px 140px 140px 140px;
grid-template-rows: 70px 120px 120px;
border-radius: 71px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 2;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 71px;
border-top-right-radius: 71px;
border: 1px solid gray;
border-bottom: none;
font-weight: 700;
}
.item2 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4;
border-bottom-left-radius: 71px;
border: 1px solid gray;
border-right: none;
}
.item3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
border: 1px solid gray;
padding: 10px;
overflow: auto;
}
.item4 {
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 4;
object-fit: conatain;
border: 1px solid gray;
border-left: none;
border-bottom-right-radius: 71px;
}
.item4 img {
max-width: 100%;
max-height: 100%;
}
.partList {
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
gap: 15px;
}
.partList a {
text-decoration: none;
cursor: pointer;
}
.partList a:hover {
opacity: 0.8;
}
.part1 {
margin-top: 20px;
}