Skip to content

Bootstrap 5 Input Group Renders Incorrectly Due to ASP Tag Helper Including Hidden __Invariant Field #3170

@rbonomo

Description

@rbonomo

In ASP.NET Core MVC projects, Bootstrap 5 Input Group renders incorrectly due to ASP Tag Helper including hidden __Invariant field in the HTML. Specifically, the right border of the right-most input-group field is not rounded if ASP Helper inserts a hidden input[name="__Invariant"] after the field. This happens when the right-most field is the last part in the input-group and the right-most field's Tag Helper generates a hidden __Invariant input.

Image
<div class="input-group">
    <span class="input-group-text">Test</span>
    <input class="form-control" asp-for="NullableDateTime" />
</div>

Update could be made to VS.Web.CG.Mvc's Bootstrap 5 site.css template so that appropriate CSS reset rules are included to resolve the issue.

Relevant links:
https://stackoverflow.com/questions/79481827/strange-invariant-hidden-element-inserted-into-markup

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions