I have a user registration form (Bootstrap 4 - in Razor Template)
Depending on the user's selections, I will hide certain parts of the form. The registration form consists of two steps, and this is the second step.
If a user selects a country without states, I will hide the states field.
Here lies the issue:
When I implement code like here, hiding the states section causes that part to be missing entirely.
To address this problem, I wrote code as seen below using float-left. If one part is hidden, the other fields move and occupy the empty space.
<div class="container py-5 bg-warning">
<div class="row">
<div id="register" class="col-md-10 mx-auto">
<form asp-action="Create" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
@if (@Model.StateList != null)
{
<div class="form-group col-sm-6 float-left">
<label asp-for="State"></label>
@Html.DropDownListFor(m => m.StateList, @Model.StateList, "- Please Select -",
new {@class = "form-control"})
<span asp-validation-for="State" class="text-danger fixed-span"></span>
</div>
}
<div class="form-group col-sm-6 float-left">
<label asp-for="City"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger fixed-span"></span>
</div>
... <!-- Other form fields omitted for brevity -->
<button type="submit" class="btn btn-primary px-4 float-right">Register</button>
</form>
</div>
</div>
As you can see, there are span elements for error messages beneath each input field. However, if an error occurs, the form layout appears distorted. Do you have any suggestions on how to fix this? Image reference attached https://i.sstatic.net/LpiEI.png