Ognjen983 Ognjen983 - 2 months ago 8
HTML Question

Issue with bootstrap and positioning (input-group)

The code is below:

<div class="form-group">
@Html.LabelFor(model => model.Zapremina_motora, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group">

@Html.EditorFor(model => model.Zapremina_motora, new { htmlAttributes = new { @class = "form-control" } })
<span class="input-group-addon">cc</span>

@Html.ValidationMessageFor(model => model.Zapremina_motora, "", new { @class = "text-danger" })

The problem that I have is that the browser gives me textbox and span addon with "cc" text separated. Photo with the issue added.

Could anyone help with this? I've spent a lot of time trying to fix this but couldn't find the solution.

Picture of the issue:

Picture of the issue


Try replacing the lines with this

@Html.EditorFor(model => model.Zapremina_motora, new { htmlAttributes = new { @class = "form-control", aria-describedby="addon1" } })
                <span class="input-group-addon" id="addon1">cc</span>