I get some issues in the grid system.
I design this label and text box but I want all this together. How can I do that ? I tried but it is not come with me
enter image description here
This is my code:
<div class="form-group">
#Html.LabelFor(m => m.Name, htmlAttributes: new { #class = "control-label col-md-12" })
<div class="col-md-10" >
#Html.EditorFor(m => m.Name, new { htmlAttributes = new { #class = "form-control " } })
#Html.ValidationMessageFor(m => m.Name, "", new { #class = "text-danger" })
</div>
</div>
I believe col-md-12 should be replaced by col-md-2 is order to not exceed 12 columns.
Also, adding a row class with your form-group, and col-form-label in place of control-label if you are using bootstrap 4.
<div class="form-group row">
#Html.LabelFor(m => m.Name, htmlAttributes: new { #class = "col-md-2 col-form-label" })
<div class="col-md-10" >
#Html.EditorFor(m => m.Name, new { htmlAttributes = new { #class = "form-control " } })
#Html.ValidationMessageFor(m => m.Name, "", new { #class = "text-danger" })
</div>
</div>
Please consult the documentation for more details.
Related
I am trying to use a #Html.DropDownList with a custom list. The Problem is when I go to Edit an Entry, It's default is the first item in the list but I would like it to be the value it originally is. When I don't use the Viewbag, It pre selects the item it originally is.
Here is the ViewBag I am using.
ViewBag.AreaEmployeeEdit= db.Areas
.OrderBy(s => s.Site.SiteName)
.Select(s => new SelectListItem
{
Value = s.AreaID.ToString(),
Text = s.Site.SiteName + " " + "||" + " " + s.Area1
});
And here it is in the Edit Form.
<div class="form-group">
#Html.LabelFor(model => model.AreaID, "Area", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("AreaID", (IEnumerable<SelectListItem>)ViewBag.AreaEmployeeEdit, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AreaID, "", new { #class = "text-danger" })
</div>
</div>
You were not setting the model for the DropDownList
your edit should be like this
<div class="form-group">
#Html.LabelFor(model => model.AreaID, "Area", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.AreaID, (IEnumerable<SelectListItem>)ViewBag.AreaEmployeeEdit, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AreaID, "", new { #class = "text-danger" })
</div>
</div>
I replaced "AreaID" with model => model.AreaID.
Can somebody help me out on how to change width of Edit box in following code? I tried everything but stubborn edit box wont change its width.
<div class="form-group">
#Html.LabelFor(model => model.Category, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Category, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Category, "", new { #class = "text-danger" })
</div>
</div>
Try this- Include style inside html attributes.
#Html.EditorFor(model => model.Category, new { htmlAttributes = new { #class = "form-control", style="width: 10px" } })
I know similar questions have been asked in the past but I can't find one matching and providing a solution to my problem, so please bear with me.
I'm trying to build a form with one textbox and various checkboxes display below it. In front of the textbox and each checkbox, but I can't figure out why the textbox label is not aligned with the label from the checkboxes and the checkboxes are not aligned with the textbox.
Here's the code I have so far. Note that I'm using (bootstrap-lumen.css)
#using (Html.BeginForm("Save", "Staffs"))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Staff Member</legend>
<div class="form-vertical">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="checkbox">
#Html.LabelFor(model => model.IsAdmin, htmlAttributes: new { #class = "control-label col-md-2" })
<label>
#Html.CheckBoxFor(model => model.IsAdmin)
</label>
</div>
<div class="checkbox">
#Html.LabelFor(model => model.CanDownloadCsv, htmlAttributes: new { #class = "control-label col-md-2" })
<label>
#Html.CheckBoxFor(model => model.CanDownloadCsv)
</label>
</div>
</div>
</fieldset>
}
Here's what it look like when rendered:
I've tried removing all classes to see if it would help, but everything seems to be getting messed up where the label is display much lower than the checkbox and so on.
I'd like all my labels to be aligned with one another and my textbox and all checkboxes to be aligned with one another as well.
Can you tell me what I'm doing wrong and how can I resolve this?
Can you please try this?
#using (Html.BeginForm("Save", "Staffs"))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Staff Member</legend>
<div class="form-vertical">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group checkbox">
#Html.LabelFor(model => model.IsAdmin, htmlAttributes: new {#class = "control-label col-md-2"})
<div class="col-md-10">
#Html.CheckBoxFor(model => model.IsAdmin)
</div>
</div>
<div class="form-group checkbox">
#Html.LabelFor(model => model.CanDownloadCsv, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.CheckBoxFor(model => model.CanDownloadCsv)
</div>
</div>
</div>
</fieldset>
}
I have scaffolded a standard create view for one of my forms using MVC bootstrap. This form however has too many input fields to have in a single column layout, its just too long and seems daft to waste the white space to the right.
I've had a look at this question and tried to get it working with my form with not much luck.
In a nutshell I want the address fields to be on the right, in line with all the other fields.
Razor Snippet
<div class="row">
<div class="col-sm-4">
<div class="form-group">
#Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteNumber, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
#Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineOne, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SiteName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Department, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Department, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Department, "", new { #class = "text-danger" })
</div>
</div>
So AddressLineOne should be on the same row as SiteNumber, AddressLineTwo should be on the same rowas SiteName and so on and so forth.
This is what I get with the above attempt for the first row:
And this is what I want:
How do I achieve this, whilst keeping the labels and standard spacing to the left.
This is what you want.
.clearfix{
clear: both;
padding: 0;
margin: 0;
height: 5px;
display: block;}
<div class="row">
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.SiteName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteName, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineOne, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.Department, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.Department, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Department, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
Basically
<div class="row">
<div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you -->
<div class="form-group">
#Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SiteName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteName, "", new { #class = "text-danger" })
</div>
</div>
<!-- Continue your first column of form groups here -->
</div>
<div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you-->
<div class="form-group">
#Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineOne, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AddressLineTwo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AddressLineTwo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineTwo, "", new { #class = "text-danger" })
</div>
</div>
<!-- Continue your second column of form groups here -->
</div>
</div>
For me it was enough to do it like this:
<div class="form-group">
#Html.LabelFor(model => model.LOA_ID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#Html.EditorFor(model => model.LOA_ID, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
#Html.ValidationMessageFor(model => model.LOA_ID, "", new { #class = "text-danger" })
</div>
#Html.LabelFor(model => model.LI_ID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#Html.EditorFor(model => model.LI_ID, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
#Html.ValidationMessageFor(model => model.LI_ID, "", new { #class = "text-danger" })
</div>
</div>
I am having trouble to keep the input group in only one piece:
Based on the MVC 5 template view build using scaffolding I have build:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Formatos e Planos</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.SizeOpenedWidth, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group">
#Html.EditorFor(model => model.SizeOpenedWidth, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SizeOpenedWidth, "", new { #class = "text-danger" })
<div class="input-group-addon">x</div>
#Html.EditorFor(model => model.SizeOpenedHeight, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SizeOpenedHeight, "", new { #class = "text-danger" })
<div class="input-group-addon">mm</div>
</div>
</div>
</div>
</div>
}
The default css comes when you create a new MVC project has max-width set to 280px for all the inputs. That is the reason it messed up your input groups.
If you remove/make adjustments to this in your ~/Content/Site.css, You should be good.