c# - Incorrect aligning of form controls in ASP MVC 5 and Bootstrap -
i have been looking solution this, nothing found far, , it's making me go crazy.
first of all, i'm new web development, asp mvc, bootstrap, ajax, javascript , on, beg pardon if there atrocious code here.
let's go question:
i have project asp mvc 5 , bootstrap, forms in it. problem is, using "form-horizontal" class, can't align controls in way, 1 control of form-group aligns next other, control on right it's bit "upped". it's better show it: 
as can see, has been made using default project of visual studio. maybe bad alignment it's not shown in textboxes, in valuefor of field3 it's clear.
here code used form. it's pretty simple:
@model pruebaauth3.models.pruebaformviewmodel @{ layout = "~/views/shared/_layout.cshtml"; } <body> <br /> <div class="panel panel-primary"> <div class="panel-heading">panel title</div> <div class="panel-body"> @using (html.beginform("submitform", "pruebaform", formmethod.post)) { <div class="form-horizontal"> @html.hiddenfor(model => model.id) <div class="form-group"> <div class="control-label col-md-2"><b>@html.labelfor(model => model.field1)</b></div> <div class="col-md-10"> @html.editorfor(model => model.field1) </div> </div> <div class="form-group"> <div class="control-label col-md-2"> <b>@html.labelfor(model => model.field2)</b></div> <div class="col-md-10"> @html.editorfor(model => model.field2) </div> </div> <div class="form-group"> <div class="control-label col-md-2"> <b>@html.labelfor(model => model.field3)</b></div> <div class="col-md-10"> @html.valuefor(model => model.field3) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="save" class="btn btn-primary" /> </div> </div> </div> } </div> </div> </body> any appreciated. in advance.
label elments have 7px top margin, default, compared input elements created editorfor. while valuefor (by default) creates text node in dom. need apply same margin-top style valuefor output or parent div.
<div class="form-group"> <div class="control-label col-md-2"> <b>@html.labelfor(model => model.field3)</b> </div> <div class="col-md-10" style="margin-top:7px"> @html.valuefor(model => model.field3) </div> </div> note suggest create css class instead of using style tag here.
Comments
Post a Comment