I'm having trouble getting a clickable icon to work properly in a form-floating label. It seems that the label is being rendered behind the input field.
I've tried adjusting the z-index with no success, and I'm not sure what else to try to solve the issue. Can anyone offer some guidance on how to fix this problem?
The "Test" button and icon in its own column (col#3, col#4) are functioning correctly, but the first two columns with form-floating examples are not redirecting when the icon is clicked.
@page "/"
@inject NavigationManager NavigationManager
<div class="container-fluid">
<div class="row">
<div class="col-1">
<div class="form-floating">
<input type="text" class="form-control" placeholder="bla">
<label>LABEL<i class="fas fa-info-circle ps-1" @onclick="Test"></i></label>
</div>
</div>
<div class="col-1">
<div class="form-floating">
<input type="text" class="form-control" value="blabla">
<label>LABEL<i class="fas fa-info-circle ps-1" @onclick="Test"></i></label>
</div>
</div>
<div class="col-1">
<button type="button" class="btn btn-sm btn-primary" @onclick="Test">Test</button>
</div>
<div class="col-1">
<i class="fas fa-info-circle ps-1" @onclick="Test"></i>
</div>
</div>
</div>
@code {
void Test()
{
NavigationManager.NavigateTo("https://google.com");
}
}