Utilizing Bootstrap 3 within a C# ASP.NET MVC5 project.
I've encountered a peculiar issue while attempting to use input-group-addon to append a 'GB' suffix to a form field.
Here is the C# code snippet:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.capacity, new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group">
@Html.TextBoxFor(model => model.capacity, new { @class = "form-control" })
<span class="input-group-addon">GB</span>
</div>
@Html.ValidationMessageFor(model => model.capacity)
</div>
</div>
</div>
}
This corresponds to:
<form action="/NewSpaceRequest/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="tP5XKKhflSS8K1e7q1I_ZSuR8Ty7X88FfuOMG5JhmF-KXtUOcn4SQdNGTMZZVC2pdBMjb7RgNrIB90Y9I5C_FgX9xmMLrwrbiFZde7PRZ13gCqjBDAVglM38T7j09-C-uNkRSCZbFqDgiU_XcH9D-w2" />
<div class="form-horizontal">
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="capacity">Capacity</label>
<div class="col-md-10">
<div class="input-group">
<input class="form-control" data-val="true" data-val-number="The field Capacity must be a number." data-val-range="The field Capacity must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="The Capacity field is required." id="capacity" name="capacity" type="text" value="" />
<span class="input-group-addon">GB</span>
</div>
<span class="field-validation-valid" data-valmsg-for="capacity" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</form>
Do you notice how the suffix does not align properly with the form field?
The reason behind this remains unclear.