asp.net mvc 5 - Textboxes are different sizes -
i created controllers , views using scaffolded item when run view in program can see textboxes different sizes.how same size? view:
@model fcproject.models.purchase @{ viewbag.title = "edit2"; } <h2>edit2</h2> @using (html.beginform(new { orderdate = model.orderdate })) { @html.antiforgerytoken() <div class="form-horizontal"> <h4>purchase</h4> <hr /> @html.validationsummary(true) @html.hiddenfor(model => model.purchaseid) <div class="form-group"> @html.labelfor(model => model.customerid, "customer cell", new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.dropdownlist("customerid", string.empty) @html.validationmessagefor(model => model.customerid) </div> </div> <div class="form-group"> @html.labelfor(model => model.deliverychoice, "deliverychoice", new { @class = "control-label col-md-2" }) <div class="col-md-10"> <div> <label>@html.radiobutton("deliverychoice", true) deliver order me</label> </div> <div> <label>@html.radiobutton("deliverychoice", false) pick order</label> </div> </div> </div> <div class="form-group"> @html.labelfor(model => model.orderduedate, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.orderduedate) @html.validationmessagefor(model => model.orderduedate) </div> </div> <div class="form-group"> @html.labelfor(model => model.ordertime, "order due time", new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.ordertime) @html.validationmessagefor(model => model.ordertime) </div> </div> <div class="form-group"> @html.labelfor(model => model.orderadress1, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.orderadress1) @html.validationmessagefor(model => model.orderadress1) </div> </div> <div class="form-group"> @html.labelfor(model => model.orderadress2, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.orderadress2) @html.validationmessagefor(model => model.orderadress2) </div> </div> <div class="form-group"> @html.labelfor(model => model.orderadress3, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.orderadress3) @html.validationmessagefor(model => model.orderadress3) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="save" class="btn btn-default" /> </div> </div> </div> } @section scripts { @scripts.render("~/bundles/jqueryval") }
here link picture of screen can see looks messy because textbox sizes different, 'order due date' textbox thick 'customercell' textbox small, 'order due time' thick , short:
the asp.net mvc project template uses bootstrap see (http://getbootstrap.com/) styling html. css file should located @ "content\bootstrap.css". note view includes following classes style form
<div class="form-horizontal"> <div class="form-group">
the submit button styled using
<input type="submit" value="save" class="btn btn-default" />
and of of htmlhelper methods (such labelfor) contain code additional styles added html. example
new { @class = "control-label col-md-2" }
in
@html.labelfor(model => model.customerid, "customer cell", new { @class = "control-label col-md-2" })
if want use bootstrap style form's controls, need add appropriate bootstrap css classes elements in view.
below examples (not related code) style various elements bootstrap.
to style drop-down list add,
html.dropdownlist("moviegenre", (selectlist)viewbag.moviegenre, "all", new { @class = "form-control" })
this results in following html class form-control
:
<select class="form-control" id="moviegenre" name="moviegenre"> <option value="">all</option> <option>comedy</option> <option>western</option> </select>
to style textbox add
@html.editorfor(model => model.genre, new { htmlattributes = new { @class = "form-control" } })
to output similar to
<input class="form-control text-box single-line" id="genre" name="genre" type="text" value="comedy" />
you might add text-danger
bootstrap css class make validation warning text red (or color it's defined in css file) this:
@html.validationmessagefor(model => model.title, "", new { @class = "text-danger" })
to learn bootstrap classes form controls take @ bootstrap's documentation.
to figure out place new { @class = "form-control" }
line in htmlhelpers take @ documentation (https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper_methods(v=vs.118).aspx)
you can add own css file after bootstrap's css , style elements (including width) yourself, if use bootstrap not recommended.
once style form elements bootstrap, width should same (go bootstrap's website , click on css forms more information).
Comments
Post a Comment