html5 - width not applying for text area MVC -


the width isnt setting textarea control. sets other controls. tell me why isnt width applying text area

for example

enter image description here

setting border solid col-md-6

enter image description here

 <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> 

the real width width textarea has. col-md-6 make wide. problem container you're applying border not constrain textarea. if understand correctly you're applying border div col-md-6 class, issue. grid classes boostrap employ various width, margin , padding settings construct grid close cross browser possible, , applying actual visible style them causes weirdness this. instead, wrap textarea div , apply border 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 , short, should avoid adding additional style bootstrap's grid classes (col-*, row, etc.).


Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -