Just starting out with Boostrap and struggling to identify what might be causing this issue on my Create view and how to resolve it.
https://i.sstatic.net/nWNkc.jpg
Below is the relevant section of my view:
<h3 class="text-primary pl-3">Client Demographic Information</h3>
<table class="table table-bordeless" style="width:100%">
<tr>
<td style="width: 30%">
<div class="form-group, mb-3">
<label asp-for="Incident.CaseType"></label>
<br />
@foreach (var item in Html.GetEnumSelectList<CaseType>())
{
<input type="radio" asp-for="Incident.CaseType" value="@item.Text"/>@item.Text
}
</div>
</td>
<td style="width: 30%">
<div class="mb-3">
<label asp-for="Incident.PIFirstName"></label>
<input asp-for="Incident.PIFirstName" class="form-control" />
<span asp-validation-for="Incident.PIFirstName" class="text-danger"></span>
</div>
</td>
<td style="width: 10%">
<div class="mb-3">
<label asp-for="Incident.PIMiddleInitial"></label>
<input asp-for="Incident.PIMiddleInitial" class="form-control" />
<span asp-validation-for="Incident.PIMiddleInitial" class="text-danger"></span>
</div>
</td>
<td style="width: 30%">
<div class="mb-3">
<label asp-for="Incident.PILastName"></label>
<input asp-for="Incident.PILastName" class="form-control" />
<span asp-validation-for="Incident.PILastName" class="text-danger"></span>
</div>
</td>
</tr>
</table>
<table class="table table-bordeless" style="width:100%">
<tr>
<td style="width: 40%">
<div class="mb-3">
<label asp-for="Incident.PIAddressCity"></label>
<select asp-for="Incident.PIAddressCity" id="Select1" class="form-select" asp-items="@(new SelectList(Model.DisplayCityData.OrderBy(x => x.CityName),"CityName", "CityName"))"><option value="" selected disabled>---Select Residence City---</option></select>
</div>
</td>
Any help would be greatly appreciated. Thanks!