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" } })
Related
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.
I have used weareoutman ClockPicker in my MVC project and it is perfectly working when I have only one clockPicker field in my View. When for example for Meeting table I need a start and an end time, the second clockPicker does not function(when I click there is no clockPicker).
Here's how I use it in my Create View:
<div class="form-group">
#Html.LabelFor(model => model.StringStartTime, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.StringStartTime, new { htmlAttributes = new { #class = "form-control clockPicker", id = "single-input", value = "", placeholder = "اکنون" } })
#Html.ValidationMessageFor(model => model.StringStartTime, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.StringEndTime, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.StringEndTime, new { htmlAttributes = new { #class = "form-control clockPicker", id = "single-input", value = "", placeholder = "اکنون" } })
#Html.ValidationMessageFor(model => model.StringEndTime, "", new { #class = "text-danger" })
</div>
</div>
So again the problem: the second clockPicker does not function(After clicking on the text box, the clockpicker does not pop up). What have I done wrong?
I solved it by giving the EndTime a different id.
I am new to MVC C# Razor, I have done this in PHP and I tried to use my previous code in Jquery (as shown below)
<script>
$(document).ready(function(){
$('.CurrentStatus').change(function () {
if(this.value == "Non-Teaching") {
$('#div-CurrentTDepartment').fadeOut('fast');
$('#div-CurrentTPostion').fadeOut('fast');
$('#div-CurrentNTDepartment').fadeIn('fast');
$('#div-CurrentNTPostion').fadeIn('fast');
}
else if (this.value == "Teaching") {
$('#div-CurrentTDepartment').fadeIn('fast');
$('#div-CurrentTPostion').fadeIn('fast');
$('#div-CurrentNTDepartment').fadeOut('fast');
$('#div-CurrentNTPostion').fadeOut('fast');
}
else {
$('#div-CurrentTDepartment').fadeIn('fast');
$('#div-CurrentTPostion').fadeIn('fast');
$('#div-CurrentNTDepartment').fadeIn('fast');
$('#div-CurrentNTPostion').fadeIn('fast');
}
});
});
</script>
and this is my Create code
<div class="form-group">
#Html.LabelFor(model => model.Status, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Status", new SelectList(ViewBag.Statusdll, "Value", "Text"), "Select Status", new { #class = "form-control", #onchange = "location = this.value;" })
</div>
</div>
<div class="form-group" id="div-NTDepartment">
#Html.LabelFor(model => model.NTDepartment, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NTDepartment, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group" id="div-NTPosition">
#Html.LabelFor(model => model.NTPosition, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NTPosition, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group" id="div-TDepartment">
#Html.LabelFor(model => model.TDepartment, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.TDepartment, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
The error is - if you select a 'Non-Teaching' on the dropdown, it shows a 404 error of the page '/Employees/Non-Teaching', which is really a 404 error because I don't have any page like that.
It should only hide or show the divs in the page.
Because you have add the event onchange = "location = this.value; which is effectively window.location.href = TheValueOfYourSelectedOption when an option is selected.
Remove that from the attributes your adding to #Html.DropDownList() and instead use
$('#Status').change(function () {
....
or if this is applicable to multiple controls, add a class name
#Html.DropDownList( ...., new { #class = "form-control", #class = "CurrentStatus" })
I have a standard edit form generated when creating a controller index/Edit/Create/Delete views. One of the fields is a date so I have added a demo of Telerik (mainly to have a play) and would like to use the date picker for that field.
The original code is:
<div class="form-group">
#Html.LabelFor(model => model.InstallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.InstallDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.InstallDate, "", new { #class = "text-danger" })
</div>
</div>
Which I have changed to:
<div class="form-group">
#Html.LabelFor(model => model.InstallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Value(Model.InstallDate)
.HtmlAttributes(new { style = "width:150px" })
)
#Html.ValidationMessageFor(model => model.InstallDate, "", new { #class = "text-danger" })
</div>
</div>
The date picker renders file however I can't figure out how to pass the value picked back to the controller so it saves it.
How save the date picker value?
Carried on researching and found that I am using the wrong function call. Instead of using #(Html.Kendo().DatePicker() all I actually needed to do was change:
#Html.EditorFor(model => model.InstallDate, new { htmlAttributes = new { #class = "form-control" } })
for
#Html.Kendo().DatePickerFor( model => model.InstallDate)