What's difference between:
#Html.LabelFor(model => model.Soluongton, htmlAttributes: new { #class = "control-label col-md-2" })
and
#Html.LabelFor(model => model.Soluongton, new { htmlAttributes = new { #class = "control-label col-md-2" } })
and what's htmlAttributes?
#Html.LabelFor(model => model.Soluongton, htmlAttributes: new { #class = "control-label col-md-2" })
will render the HTML code:
<label class="control-label col-md-2" for="Soluongton">Soluongton</label>
#Html.LabelFor(model => model.Soluongton, new { htmlAttributes = new { #class = "control-label col-md-2" } })
will render the HTML code:
<label for="Soluongton" htmlAttributes="{ class = control-label col-md-2 }">Soluongton</label>
As you can see the second #Html.LabelFor will render a wrong HTML output.
Related
I have this form below, what i want to align my label for be on the left and then texbox on the right. How do i do this on my view? Do i need to use class on my bootstrap?
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-5">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
Try form-inline class on parent element or you can use horizontal-form of bootstrap.
https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form
I have a problem adjusting my dropdowns to equally aligned to my textarea.
Html:
<!-- YEAR -->
<div class="col-md-6 col-md-push-1">
<div class="form-group">
#Html.LabelFor(model => model.Year, htmlAttributes: new { #class = "control-label col-md-6" })
#Html.DropDownListFor(model => model.Year, ViewBag.years as IEnumerable<SelectListItem>,
"-- Select Year --", new { #class = "form-control", #id = "cbYears" })
#Html.ValidationMessageFor(model => model.Year, "", new { #class = "text-danger" })
</div>
</div>
<!-- MONTH -->
<div class="col-md-6 col-md-push-1">
<div class="form-group">
#Html.LabelFor(model => model.Month, htmlAttributes: new { #class = "control-label col-md-12" })
#Html.DropDownListFor(model => model.Month, ViewBag.months as IEnumerable<SelectListItem>,
"-- Select Month --", new { #class = "form-control", #id = "cbMonth" })
#Html.ValidationMessageFor(model => model.Month, "", new { #class = "text-danger" })
</div>
</div>
<!-- GOOD -->
<div class="form-group">
<div class="col-md-4 col-md-push-1">
#Html.LabelFor(model => model.Good, htmlAttributes: new { #class = "control-label col-md-8" })
</div>
<div class="col-md-10 col-sm-push-1">
#Html.TextAreaFor(model => model.Good, new { maxlength = 5000, rows = "10", cols = "200", id = "txtGood" })
#*#Html.TextAreaFor(model => model.Good, new { maxlength = 5000, id = "txtGood" })*#
#Html.ValidationMessageFor(model => model.Good, "", new { #class = "text-danger" })
</div>
</div>
I just want to adjust my Month,Geography and Process dropdowns to push a little bit more to the right so it aligned to my textarea.
Preview
I think your .col-md classes have default bootstrap padding or margin.
So you can add the ".nopadding" class to a particular .col-md div to remove it.
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
I have a headache from this design.
How I can separate a little bit in inline form label and textbox which belongs to form-control class.
I've tried everything, and margin and align-text, but I didnt find solution
Here is a photo:
Here is the code:
<div class="container">
<div class="row">
<div class="span9">
<br />
<h2 style="margin-top:100px;text-align:center">
APPLY FOR INTERNSHIP PROGRAM
</h2>
</div>
<div class="col-md-4 col-sm-4 col-md-offset-4">
<br />
<div class="form-group">
#Html.LabelFor(model => model.Name, "Name", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Surname, "Surname", htmlAttributes: new { #class = "control-label col-md-2 col-md-2 col-sm-2" })
#Html.EditorFor(model => model.Surname, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Surname, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Location, "Location", htmlAttributes: new { #class = "control-label col-md-2" })
#*#Html.DropDownList("LocationID", null, "--Choose location--", new { #class = "form-control" })*#
#Html.DropDownListFor(model => model.LocationID, ViewBag.LocationID as IEnumerable<SelectListItem>, "-----Select Category-----", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Location, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Mail, "E-mail", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.Mail, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Mail, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Telephone, "Telephone number", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.Telephone, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Telephone, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.StartEduYear, "Entrance study year", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.StartEduYear, ViewBag.StartYearFaculty as IEnumerable<SelectListItem>, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.StartEduYear, "", new { #class = "text-danger" })
</div><br />
<div class="form-group">
#Html.LabelFor(model => model.EnglishLang.NameLang, "English level", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownList("EngID", null, "--Choose level--", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.EngID, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Faculty.FacultyName, "Faculty", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.FacultyID, ViewBag.FacultyID as IEnumerable<SelectListItem>, "--Select a faculty--", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.FacultyID, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.AvgScore, "Average score", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.AvgScore, ViewBag.AverScore as IEnumerable<SelectListItem>, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AvgScore, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.GradYear, "Graduation year", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.GradYear, ViewBag.GradYear as IEnumerable<SelectListItem>, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.GradYear, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.WExp, "Work Experience", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.WExp, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.WExp, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Interests, "Interests", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.Interests, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Interests, "", new { #class = "text-danger" })
</div>
<span>Did you have any additional trainings?</span>
<label for="chkYes">
<input type="radio" id="chkYes" name="chkPassPort" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chkPassPort" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvPassport" style="display: none">
#Html.LabelFor(model => model.Trainings, "Trainings", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.Trainings, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Trainings, "", new { #class = "text-danger" })
</div>
<p></p>
<span>Did you have any projects recently?</span>
<label for="chkYes">
<input type="radio" id="chkYes1" name="chkPassPort1" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo1" name="chkPassPort1" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvExample" style="display: none">
#Html.LabelFor(model => model.Projects, "Projects", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.Projects, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Projects, "", new { #class = "text-danger" })
</div>
<p></p>
<span>Have you been in some students organization?</span>
<label for="chkYes">
<input type="radio" id="chkYes2" name="chkPassPort2" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo2" name="chkPassPort2" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvExample1" style="display: none">
#Html.LabelFor(model => model.StudOrg, "Organizations", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.StudOrg, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.StudOrg, "", new { #class = "text-danger" })
</div>
<p></p>
<input type="submit" value="Apply" class="btn btn-default" style="text-align: center" />
</div>
#*<div class="form-group">
sdsdsdsd
<div class="g-recaptcha" data-sitekey="6LccVRcTAAAAADLo_LxSj4mQzt9jLrgbo5L9wZ-J"></div>
<div>sdsdsds11
#if (TempData["recaptcha"] != null)
{
<p>#TempData["recaptcha"]</p>
}
</div>
</div>*#
#*<div class="col-md-offset-2 col-md-10">
<div class="form-group">1231
#Html.Recaptcha()
</div>
</div>*#
</div>
</div>
I think you need to take another look at Bootstrap documentation. If you're using Bootstrap 3.x, you should not be using span* (that belong to Bootstrap 2.x). span* have been replaced with col-md-*.
You can refer to this migration guide.
Also, you should place all of your .form-group elements inside a .form-horizontal container.
You're simply not giving the elements enough room. Your form is restricted to 4 columns and then your label is restricted to 2 columns. Essentially, the form is 4/12 of the total available width, then your label is 2/12 of that, which means overall your label is only 1/18 of the total available width. Just give it some more breathing room. Perhaps make your form col-md-6 or col-md-8 and your label something like col-md-3. Or if you want to stick with col-md-4 for the whole form, increase your label to something like col-md-4.
I have an issue with the layout of some html elements. I have a form which i am changing into a tabbed display in order to split it up and make it more usable. The existing form looks like this:
However, when i use the same code inside of a tab, the result is as below:
As i stated, the code for it is exactly the same as below:
<div class="col-md-12" style="display:block;">
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Receiver, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Receiver, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Receiver, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Department.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.CommunicationModel.Communication.Department.Name)
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.DepartmentId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.DateOpened, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span id="custSpan" style="font-size:14px;">
#Html.DisplayFor(model => model.CommunicationModel.Communication.DateOpened)
#Html.HiddenFor(model => model.CommunicationModel.Communication.DateOpened)
</span>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Method, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.CommunicationModel.Communication.Method, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Method, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Product, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Product, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Product, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.PartNo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.PartNo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.PartNo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Severity.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.CommunicationModel.Communication.SeverityId, new SelectList(Model.AllSeverities, "Id", "DisplayName"), new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
</div>
It appears to be certain elements affecting the layout. So far i have noticed it on both Html.DisplayFor() and Html.EnumDropDownListFor() (an extension of standard DropDownListFor(). It appears to indent the elements on the next line for some reason.
Can anybody help with this?
Many thanks :)
Try this,
<div class="col-md-12" style="display:block;">
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Receiver, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Receiver, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Receiver, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Department.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.CommunicationModel.Communication.Department.Name)
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.DepartmentId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.DateOpened, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span id="custSpan" style="font-size:14px;">
#Html.DisplayFor(model => model.CommunicationModel.Communication.DateOpened)
#Html.HiddenFor(model => model.CommunicationModel.Communication.DateOpened)
</span>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Method, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.CommunicationModel.Communication.Method, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Method, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Product, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Product, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Product, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.PartNo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.PartNo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.PartNo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Severity.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.CommunicationModel.Communication.SeverityId, new SelectList(Model.AllSeverities, "Id", "DisplayName"), new { #class = "form-control" })
</div>
</div>
</div>
</div>
I have two projects in mvc .
in one of them i use this code :
#Html.LabelFor(model => model.Subject, new { #class = "control-label col-lg-2" })
And it works correctly because the project has an extension method for labelfor as you can see here :
public static System.Web.Mvc.MvcHtmlString LabelFor<TModel, TValue>(this System.Web.Mvc.HtmlHelper<TModel> html, System.Linq.Expressions.Expression<Func<TModel,TValue>> expression, object htmlAttributes)
But in the other project when i use the above code i mean :
#Html.LabelFor(model => model.Name, new { #class = "control-label col-lg-2" })
I got this error :
CS1928: 'System.Web.Mvc.HtmlHelper<DomainClass.Task>' does not contain a definition for 'LabelFor' and the best extension method overload 'System.Web.Mvc.Html.LabelExtensions.LabelFor<TModel,TValue>(System.Web.Mvc.HtmlHelper<TModel>, System.Linq.Expressions.Expression<System.Func<TModel,TValue>>, string)' has some invalid arguments
In the object browser i couldn't find the above extension that the other project has.as you can see here :
where is the problem?should i change the mvc version ?
here is the view code :
#model DomainClass.Task
#using System.Web.Mvc.Html;
#{
ViewBag.Title = "Create";
Layout = "~/Areas/Admin/Views/Shared/_LayoutPage.cshtml";
}
#using (Html.BeginForm("Create", "Task", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" ,#class = "cmxform form-horizontal tasi-form" }))
{
<div class="row">
<div class="col-lg-12">
<section class="panel panel-default">
<div class="panel-heading" style="font-weight: bold">ثبت نمایشگاه </div>
<div class="panel-body">
<div class=" form">
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Name, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.StartDate, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.StartDate, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.StartDate, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FinishDate, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.FinishDate, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.FinishDate, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Duration, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.Duration, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Duration, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Importance, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextAreaFor(model => model.Importance, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Importance, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateOfSubmit, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextAreaFor(model => model.DateOfSubmit, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.DateOfSubmit, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Type, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextAreaFor(model => model.Type, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Type, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-success" type="submit">ثبت اطلاعات</button>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
}
Best regards
I finally remove my asp.mvc from nuget and install it again .and it works fine.