unknown gap before input-group-addon in default asp.net mvc 5 template

Question

how to reproduce :

1. create new ASP.Net MVC project
2. add a model
3. add a controller with scaffolding views
4. open the Create.cshtml in browser , then change any "form-group" using firebug or developer tools :

From :

<div class="form-group">
   <label class="control-label col-md-2" for="Name">Name</label>
   <div class="col-md-10">
      <input name="Name" class="form-control text-box single-line" id="Name" type="text" value="">
   </div>
  <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Name"></span>
</div>

To :

<div class="form-group">
   <label class="control-label col-md-2" for="Title">Title2</label>
   <div class="col-md-10">
      <div class="input-group">
        <input name="Title" class="form-control text-box single-line" id="Title" type="text" value="">
        <span class="input-group-addon">@</span>
      </div>
   </div>
</div>

we just put "input" inside a "div" with "class='input-group'" and added an "input-group-addon"

the result is very weird , it looks like this : http://i.imgur.com/ylpYJKh.png

but the correct result is this : http://jsfiddle.net/6t3d9z8e/

is this a bug with ASP.Net MVC 5 default template or what ?

Answer 1

It's interesting bug in interaction between bootstrap css and microsoft default styles.

See in your default css file "Site.css" and remove block after comment Set width on the form input elements since they're 100% wide by default, where setting max-width property on inputs.

And if you want to limit your input by size you should do this by bootstrap's col-md-... classes.