I am new to CSS and JQuery. I have a C# MVC application that has several forms and I want to use the JQuery datepicker control. What I am seeing is that the datepicker is there, but it is hard to see and is obscured by the other boxes in the form.
All I can do is really describe it, since the site will not allow me to upload images in this question (I keep getting a "Service Unavailable" error). When I click on the editor in the view, I can see the datepicker calendar appear, but it is basically getting all mashed up with the other form boxes below it (to the point where it obscures parts of the calendar).
My markup code is here:
#section Scripts
{
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/cssjqryUi")
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+5",
});
});
</script>
}
<div class="form-group">
<div class="col-md-10">
#Html.LabelFor(model =>
model.ExpiryDate,
"Expiry Date",
htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(m => m.ExpiryDate, new { #class = "datepicker"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
#Html.LabelFor(model =>
model.IssuanceFeeValue,
"Issuance Fee Value",
htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(m => m.IssuanceFeeValue)
#Html.ValidationMessageFor(m => m.IssuanceFeeValue, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-10">
#Html.LabelFor(model =>
model.Tenor,
"Tenor",
htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(m => m.SelectedTenor, Model.TenorList)
#Html.ValidationMessageFor(m => m.SelectedTenor, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-10">
#Html.LabelFor(model =>
model.Tranche,
"Tranche",
htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(m => m.SelectedTranche,Model.TrancheList)
</div>
</div>
I have tried tinkering with the z-index and that did nothing. Note sure what I am missing here.
Any advice would be greatly appreciated.
UPDATE
I have a picture that I can upload of what the markup looks like:
I had the same exact issue a few days ago, this problem is because you are probably missing a jquery-ui.css file.
try adding this file to your page:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css
Related
This makes a really nice control. But not if I can't use it. Does it have a feature that lets me set a minimum date as the least date selectable on the control?
<div class="form-group">
#Html.Label("desired ship on:", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.DesiredShipDate, new { #type = "date", #Value=Model.DesiredShipDate.ToString("yyyy-MM-dd") })
</div>
</div>
I am using the following EditorTemplate:
<div class="form-group">
#Html.LabelFor(m => m, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, htmlAttributes)
#Html.ValidationMessageFor(m => m, null, new { #class = "help-block" })
</div>
</div>
When attempting to save the form with a deliberate error, the page refreshes and correctly shows the validation error but the label completely disappears. It is not hidden it is completely gone from the html source.
Here is my EditorFor:
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
Is this a bug, or does anyone know what might be causing this?
This problem has been fixed with the latest asp.net core.
See here:
https://github.com/aspnet/Mvc/issues/2778
I would like the validation error text to appear to the right form controls, but instead it appears under. In Bootstrap 2 there was a style called help-inline that appeared to do this, but it has been removed from version 3.
The solution I have right now is ok -- at medium and large resolution it looks the way I want it:
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.TextBoxFor(model => model.FirstName, htmlAttributes: new { #class = "form-control", maxlength = "40" })
</div>
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger col-md-6 form-control-static" })
</div>
This produces:
The problem is that when the screen width is reduced, the ValidationMessage span takes up an extra line even when hidden -- which grows the height of the form. Which you can see if you look at the spacing after the first and last names which use the above syntax, opposed to City which uses the more common syntax:
Is there way of updating the more common syntax of:
<div class="form-group">
#Html.LabelFor(model => model.City, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.City, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.City, "", new { #class = "text-danger" })
</div>
</div>
Here is the rendered HTML from the example above:
<div class="form-group">
<label class="control-label col-md-2" for="Address_City">City</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Address_City" name="Address.City" type="text" value="RCQXNEZMTBSURAX" />
<span class="field-validation-valid text-danger" data-valmsg-for="Address.City" data-valmsg-replace="true"></span>
</div>
</div>
So there a way to have the validation appear to the right of the control (inline) without creating that extra line at reduced width?
Problem Statement:
In one of my edit view I want make textbox as disabled, so for this i'm using DisplayFor instead of TextboxFor. But when I use Displayfor, alignment is not coming properly. You can see images attached for your reference. I'm using Bootstrap CSS 3.0
Any help would be appreciated. What inline CSS I should use to align properly??
Image1: In this image you can see that Acquire Status ID label and Textboxfor properly aligned.
Image2: When I use DisplayFor instead of Textboxfor, Acquire Status ID label and Displayfor are not aligned properly.
View:
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.AcquirestatusID, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.AcquirestatusID,new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AcquirestatusID)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Name)
</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>
I solved my problem using readonly attribute to my Textboxfor.
#Html.TextBoxFor(model => model.AccessoriesID,new { #class = "form-control",#readonly="readonly" })
After applying above line of code my edit view looks:
It might be happening due to the style.css which is by default in your project.
Remove style.css from the project
Note: you might only need some of the validation classes inside it
I agree with csoueidi , check with developer tools on IE or inspect element on chrome to see which css is loading the styles for that textbox.
If you want to line up the text and not use a textbox, use the class "form-control-static"
<div class="col-md-10 form-control-static">#Html.DisplayTextFor(model => model.AcquirestatusID)</div>
My textboxes aren't aligning with my form properly at all. I'm using Bootstrap within ASP.NET MVC 4. As you can see I'm using the form-horizontal div but im not sure why my elements are appearing all out of line. How do I get the elements to align with the labels?
<div class="form-horizontal">
#Html.ValidationSummary(true)
<div class="form-group">
#Html.Label("Please enter the Inventory No", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Log.InventoryNo, new {maxlength = "10", autocomplete = "off"})
#Html.ValidationMessageFor(model => model.Log.InventoryNo)
<span class="help-block">Inventory No is physically located on the Inventory sticker device on the side of a device.</span>
</div>
</div>
<div class="form-group">
#Html.Label("Please add any keywords", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Tags, new {autocomplete = "off", maxlength = "250"})
#Html.ValidationMessageFor(model => model.Tags)
<span class="help-block">Required: Enter the keywords of your fault description. For emample, Printer, Jammed, Paper and etc. </span>
</div>
</div>
<div class="form-group">
#Html.Label("Please enter a description of the fault", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.IncidentDescription, new {maxlength = "90"})
#Html.ValidationMessageFor(model => model.IncidentDescription)
</div>
</div>
First I would add the form-control class to your textboxes and textarea i.e
#Html.TextBoxFor(model => model.Log.InventoryNo, new {maxlength = "10", autocomplete = "off", #class="form-control"})
....
#Html.TextAreaFor(model => model.Tags, new {autocomplete = "off", maxlength = "250", #class="form-control"})
See here for more info on form-control:
http://getbootstrap.com/css/
Secondly you need to add your labels within your column divs like this:
<div class="form-group">
<div class="col-md-10">
#Html.Label("Please enter a description of the fault", new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.IncidentDescription, new {maxlength = "90"})
#Html.ValidationMessageFor(model => model.IncidentDescription)
</div>
</div>
Here is a simple example here:
http://www.bootply.com/128038