Here is the angular template code I am working with:
<!-- Modal -->
<ng-template #levelsmodal let-c="close" let-d="dismiss">
<div class="modal-header">
Select the levels you want to show in the table and chart
</div>
<div id="segments-modal" class="modal-body">
<div class="row margin" *ngFor="let level of config?.data?.groups; let i = index" (click)="selectLevel(level)">
<div class="colorspan" [style.backgroundColor]="level.active ? colors[i] : 'gray'" class="colorspan">
</div>
<span class="level-labels pointer-cursor" [innerHTML]="getLabel(level)" ></span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" (click)="c()">Close</button>
</div>
</ng-template>
The "pointer-cursor" class definition is quite simple:
.pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
I added the z-index property to see if it had any effect, but unfortunately, it did not. I attempted applying this class to other elements like the wrapper div without success. The cursor remains a regular text cursor instead of changing to a pointer...
Does anyone have insights into why this might be happening?