width not applying for text area MVC - html

Question

The width isnt setting for the textarea control. It sets for the other controls. Could somebody tell me why isnt the width applying for text area
For example
Setting border to solid for col-md-6
<div class="form-group">
#Html.LabelFor(model => model.ProjectName, htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-6">
#Html.EditorFor(model => model.ProjectName, new { htmlAttributes = new { #class = "form-control", style = "width:100%" } })
#Html.ValidationMessageFor(model => model.ProjectName, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.ProjectSummary, htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-6">
#Html.TextAreaFor(model => model.ProjectSummary, new { htmlAttributes = new { #class = "form-control", rows = "3", style = "max-width:100%" } })
#Html.ValidationMessageFor(model => model.ProjectSummary, "", new { #class = "text-danger" })
</div>
</div>

Answer 1

The real width is the width the textarea has. The col-md-6 will make it that wide. The problem is that the container you're applying the border to does not actually constrain the textarea. If I understand you correctly that you're applying the border to the div with the col-md-6 class, that could very well be your issue. The grid classes that Boostrap employ various width, margin and padding settings to construct a grid that is as close to cross browser as possible, and applying actual visible style to them almost always causes weirdness like this. Instead, wrap your textarea with another div and apply the border to that:
<div class="col-md-6">
<div class="my-awesome-border">
#Html.TextAreaFor(model => model.ProjectSummary, new { htmlAttributes = new { #class = "form-control", rows = "3", style = "max-width:100%" } })
#Html.ValidationMessageFor(model => model.ProjectSummary, "", new { #class = "text-danger" })
</div>
</div>
Long and short, you should always avoid adding additional style to anything with Bootstrap's grid classes (col-*, row, etc.).