I'm having an issue where my kendo datetimerpicker is rendering differently between when I run on my local machine and when the webpage has been published
Script:
<script>
$(document).ready(function () {
$("#datetimepicker").kendoDateTimePicker({
animation: {
close: {
effects: "faceOut zoom:out",
duration: 300
},
open: {
effects: "faceIn zoom:in",
duration: 300
}
}
});
});
HTML:
<div class="form-group">
#Html.LabelFor(model => model.Highwatermark, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Highwatermark, new { htmlAttributes = new { #class = "form-control", #id = "datetimepicker" } })
#Html.ValidationMessageFor(model => model.Highwatermark, "", new { #class = "text-danger" })
</div>
</div>
Running on local machine:
Published:
It still works if I click where the calendar and clock should be but I'm not sure why the images aren't showing up.
I'm also not sure why the datetimepicker is stretching so far over in both cases.
The form-control CSS class is related to the expanding:
http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#use-form-control-bootstrap-css-class
You can restore the standard DateTimePicker width of 15em with a custom CSS rule:
.k-datetimepicker.form-control {
width: 15em;
}
If you need only some DateTimePickers to maintain their default width, apply another custom CSS class in htmlAttributes in addition to form-control and use it in the CSS selector:
.k-datetimepicker.form-control.my-no-expand {
width: 15em;
}
Assuming that the main theme images (sprite.png and sprite_2x.png) do exist on the production server, then the problem with the missing icons can be caused by the CSS bundling configuration:
http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#css-bundling
Check your kendo CSS files. Sometimes the relative addresses need modification to apply corrently. It is common issue. For example in css file you have something like:
background-image:url('Bootstrap/sprite.png')
which should change to
background-image:url('2015.3.930/Bootstrap/sprite.png')
Related
The following code:
View:(is-valid)
<div class="form-group">
#Html.LabelFor(m => m.Telefone, new { #class = "font-weight-bold" })
#Html.TextBoxFor(m => m.Telefone, new { #class = "form-control is-valid", #placeholder = "Digite seu telefone" })
#Html.ValidationMessageFor(m => m.Telefone, "", new { #class = "text-danger" })
</div>
View:(is-invalid)
<div class="form-group">
#Html.LabelFor(m => m.Telefone, new { #class = "font-weight-bold" })
#Html.TextBoxFor(m => m.Telefone, new { #class = "form-control is-invalid", #placeholder = "Digite seu telefone" })
#Html.ValidationMessageFor(m => m.Telefone, "", new { #class = "text-danger" })
</div>
Example: https://getbootstrap.com/docs/4.3/components/forms/#server-side
Any solution ?
Simple solution by using Tag Helpers:
<div class="form-group">
<input asp-for="Email" class="form-control">
<div class="invalid-feedback" style="display:block;">
<span asp-validation-for="Email"></span>
</div>
</div>
The class name is hardcoded: https://github.com/dotnet/aspnetcore/blob/v3.1.6/src/Mvc/Mvc.ViewFeatures/src/HtmlHelper.cs#L25
The only option is to alter CSS.
When you build Bootstrap from sources you can just add the next code into your SCSS file:
.input-validation-error {
#extend .is-invalid;
}
This will create an alias for existing .is-invalid.
Razor uses jQuery validation. You only need to hock jq-valid with Bootstrap:
$('form').validate().settings.errorClass += ' is-invalid';
$('form').validate().settings.validClass += ' is-valid';
//CONFIGURACAO BOOTSTRAP 4 PARA JQUERY VALIDATION PLUGIN
jQuery.validator.setDefaults({
onfocusout: function (e) {
this.element(e);
},
//onkeyup: false,
highlight: function (element) {
jQuery(element).closest('.form-control').addClass('is-invalid');
},
unhighlight: function (element) {
jQuery(element).closest('.form-control').removeClass('is-invalid');
jQuery(element).closest('.form-control').addClass('is-valid');
},
errorElement: 'div',
errorClass: 'invalid-feedback',
errorPlacement: function (error, element) {
if (element.parent('.input-group-prepend').length) {
$(element).siblings(".invalid-feedback").append(error);
//error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
});
Building off Seagull's answer for .Net 5 and Bootstrap 5 (I can't comment on his answer).
I was able to follow this guide, https://www.dotnetcatch.com/2019/05/16/adding-bootstrap-sass-to-asp-net-core/, to build a custom Bootstrap CSS that includes the ASP.NET validation class name so that you get the look of the Bootstrap validation controls.
#import "../lib/bootstrap/scss/bootstrap";
.input-validation-error {
#extend .is-invalid;
}
be sure to include :
"jquery .js
jquery.validate .js
jquery.validate.unobtrusive .js"
We are developing an ASP.NET MVC web application that uses Bootstrap's datetimepicker on the front end for selections. We need to provide support for the latest version of all major browsers.
Chrome requires that dates be formatted as 'yyyy-MM-dd' to resolve errors such as the following:
The specified value "11/18/2016 00:00:00" does not conform to the
required format, "yyyy-MM-dd".
This causes a problem since the format option works correctly (i.e. user can click the date and have it set in the input box) when the following code is used:
$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-DD',
showTodayButton: true,
showClose: true
});
However, this code causes Firefox and IE to not make use of the value attribute that is set:
<div class="form-group">
#Html.LabelFor(model => model.StartDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { #class = "form-control datetimepicker", type = "date", #Value = Model.StartDate } })
#Html.ValidationMessageFor(model => model.StartDate, "", new { #class = "text-danger" })
</div>
</div>
Removing format: 'YYYY-MM-DD' causes Firefox and IE to work correctly at the expense of Chrome no longer working. Is there a way to set the format in a browser specific way?
Not the most elegant solution in the world, but since we need to know the browser for other things, we are setting flags on the server side based upon the Request.UserAgent and then using those flags client side:
Server C#
ViewBag.Chrome = userAgent.Contains("Chrome");
Client JavaScript
$('.datetimepicker').datetimepicker({
showTodayButton: true,
showClose: true,
#if (ViewBag.Chrome)
{
<text>format: 'YYYY-MM-DD'</text>
}
});
I'm using the existing template of the ASP.NET MVC project, but I have a textarea field that I want it to be resizable in both directions with minimum height and width.
I'm using EditorFor in the markup and specified [DataType(DataType.MultilineText)] in the model class.
<div class="form-group">
#Html.LabelFor(model => model.Body, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Body, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Body, "", new { #class = "text-danger" })
</div>
</div>
I'm new to bootstrap, but using the page inspector I found that the margin taking the whole width and I can't change its value, I changed the height value and it works but with fixed width:
textarea.form-control {
height: 400px;
margin: 0px;
resize: both;
}
It appears you're using razor syntax, so you could try this for the TextArea:
#Html.TextAreaFor(model => model.Body, new { #class = "form-control" })
Hi I am new to MVC and I have an input box where a user must enter a date. For some reason my date time picker is not displaying and I have to manually type in the date. I have declared all script files in my layout page. Am I missing something?
This is my display
This is my code for my view
<div class="form-group">
#Html.LabelFor(model => model.order_preffered_date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.order_preffered_date, new { htmlAttributes = new { #class = "form-control datepicker" } })
#Html.ValidationMessageFor(model => model.order_preffered_date, "", new { #class = "text-danger" })
</div>
</div>
I'm assuming you have an editor template set up for whatever type model.order_preffered_date is (DateTime probably) - Views/Shared/EditorTemplates/DateTime.cshtml - that contains your datepicker markup?
(BTW it's 'preferred', not 'preffered' - sorry to be pedantic but Thrupps will thank you :) )
Follow-up: If you don't want to use a specific editor template of your own, then ensure it's removed (so the default is used) and then the following checklist should sort you out:
Bootstrap datepicker CSS & JS file declared on the page (you've already mentioned you've done this - I assume jQuery is already present)
The datepicker element is initialised in the document.ready function somewhere, e.g.
$(function() {
...
$('.datepicker').datepicker();
...
});
If this is still not helping, then ensure your model property is decorated appropriately with DataType:
[DataType(DataType.Date)]
public DateTime order_preffered_date {get;set;}
When the bootstrap-datepicker is used inside a modal window, there is no decoration on hover events (days, buttons...) and current date is not highlighted.
It works fine when the datepicker is not inside a modal window.
How can I fix that?
Edit :
in my view "Details.cshtml":
<div class="form-group">
#Html.LabelFor(model => model.ImpactForm.DateFinTestPilote, new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.ImpactForm.DateFinTestPilote)
#Html.ValidationMessageFor(model => model.ImpactForm.DateDebutTestPilote)
</div>
</div>
I have an editor template for Nullable DateTime type :
#inherits System.Web.Mvc.WebViewPage<System.Nullable<DateTime>>
#if (Model.HasValue)
{
#Html.TextBox("", (Model.Value.ToShortDateString()), new { #class = "datepicker form-control" })
}
else
{
#Html.TextBox("", null, new { #class = "datepicker form-control" })
}
bootstrap.css and bootstrap.js are loaded in _Layout.cshtml.
datepicker.css, bootstrap-datepicker.js and bootstrap-datepicker.fr.js are loaded in Details.cshtml
Try Loading CSS of Bootstrap in View itself and not in Layout,i think in your problem other CSS's is modifying css of bootstrap so load css of bootstrap in view where you are opening the modal.
Thanks!!