How to avoid bootstrap labels to overflow the date picker input on .NET 8?

Question

I'm following the Microsoft Identity tutorial on adding custom attributes to the identity user. I've added the proposed changes by the microsoft docs, however I'm getting a small visual error.

Code is as follows:

<div class="form-floating mb-3">
    <label asp-for="Input.DOB"></label>
    <input asp-for="Input.DOB" class="form-control" />
    <span asp-validation-for="Input.DOB" class="text-danger"></span>
</div>

And this is what I'm seeing:

I've tried checking bootstrap docs and adding padding but I'm not sure what would be the most elegant fix for this

Answer 1

Reason

Change your Register.cshtml like below.

<div class="form-floating">
    <label asp-for="Input.Name"></label>
    <input asp-for="Input.Name" class="form-control" />
    <span asp-validation-for="Input.Name" class="text-danger"></span>
</div>
<div class="form-floating">
    <input asp-for="Input.DOB" class="form-control" />
    <label asp-for="Input.DOB"></label>    
    <span asp-validation-for="Input.DOB" class="text-danger"></span>
</div>

Test Result