Hi my kendo datepicker shows two month while change the month of a date picker.Please see the screenshot. I found the below solution Kendo datepicker shows two months during animation . but no luck .Can anyone help to this issue ?
My Code:
#(Html.Kendo().DatePicker().Name("datepicker").Max(DateTime.Today).Events(e => { e.Change("SearchonClick"); }).HtmlAttributes(new { style = "width: 100%", #placeholder = "dd/mm/yyyy", onkeydown = "javascript:return false;" }) )
The observed problem is surely caused by CSS code that enforces one of the following styles to the popup Calendar's table elements:
/* any other selector that influences Kendo UI Calendar tables */
table {
width: 100%;
/* or */
float: none;
}
The Kendo UI Calendar applies and requires the following styles:
.k-calendar .k-content {
width: 100%;
float: left;
}
The 100% width style is then overridden by a calculated inline pixel width style.
So, if any of the two styles are overridden by non-Kendo UI styles, the Calendar navigation will break. Please check and modify your selectors, so that they do not target Kendo UI Calendar tables.
Finally i found answer
bootstrap.css affect the datepicker table. Add the below css is exact solution.
#datepickerid_dateview table.k-content
{
border-collapse: inherit;
}
Related
I use kendo-ui dropdown.
I add some ovveriding-css, and it works well.
.k-animation-container {
//this is popup that is html is rendered out of the page element
//so it cannot be selected by id / panaya class / panaya element
.k-popup.k-list-container {
.k-item,
.k-item.k-state-selected,
.k-item.k-state-focused {
background-color: transparent;
color: $darken-gray-color;
margin-left: 0;
margin-top: 0;
}
}
}
The problem is, that while each dropdown has other input element instance, the list has one instance that is hidden and when you click any combo - is shown near the currently clicked combo.
What say - when you ovveride the list-container style - dows it for all of the combooxes.
Is there any solution for this issue?
Well this is a known problem, for every popup kendo renders independent div with class k-animation-container
You can try with this solution suggested on telerik forum:
k-animation-container
$("#spreadsheet").on("click", ".k-spreadsheet-editor-button", function(e) {
var animationContainer = $(".k-animation-container").last();
// use some custom conditional statement that will determine if this is the correct list popup, e.g. check what's inside the popup
if (true) {
animationContainer.children(".k-popup").css("min-width", 200);
}
});
Didn't try it my self, gl.
One solution I found was to use
popup: {
appendTo: $(some parent with ID)
}
This way we can manipulate styling of that particular .k-animation-container.
But this doesn't work on every widget, unfortunately.
My team find a great solution:
There is an option to give the input-element custom id.
Then you can select the list-container by the custom id you gave +'list' str.
Now, if you want to get the k-animation-container, you can select the list element and then request its parent.
Code sample:
The input element:
<span
kendo-multi-select
id="my-type-dd"
k-options="$ctrl.getVMultySelectConfig()"
k-ng-model="$ctrl.selectedTypes"
></span>
Selectors:
If you need only the k-list-container and not must the k-animation-container, you can do that by css:
.k-animation-container #my-type-dd-list {
//this is popup that is html is rendered out of the page element
//the id is the id you give to the element + '-list'
&.k-popup.k-list-container {
padding: $space-normal 0 $space-small $space-small;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.1);
}
}
If you need the k-aniamation-container you need to select it by jQuery becouse css doesn't have parent selector:
var kAnimationElement = $("#my-type-dd-list").parent();
I'm using jqGrid JS v5.3.0, with styleUI set to Bootstrap. On edit form, the checkbox (created by setting edittype option. also set editoptions: {value:"true:false"}) is aligned to the center of the form. Is there a way to make it align to the left?
Thanks in advance.
The reason for this is the setting in the bootstrap css
.EditTable td input,
.EditTable td select,
.EditTable td textarea {
width: 98%;
display: inline-block;
}
i.e this is caused from width:98%
To correct this there are a lot of ways.
The first one is to use editoptions to set a manual auto width with style options.
edittype : 'checkbox',
editoptions : {value:"true:false", "style":"width:auto"},
The second one (more elegant IMHO) is to set this in css for all check-boxes in the edit form like this:
<style>
.EditTable td input[type="checkbox"]
{
width :auto;
}
</style>
after loading the jqgrid bootstrap css file.
I have a jqgrid in which I have implemented the filter toolbar on top of the grid. Now I want to increase the height of all filter toolbar columns but I am not getting exact idea. I searched it on the web and got to know that it can be done by changing in .css file of the grid but not getting the exact code snippet.
Also I have to increase the height of grid rows.
$('#mytable').jqGrid('filterToolbar', {autosearch: true});
The height of the filter toolbar are set by some lines of ui.jqgrid.css. Default height is 20px. To increase it for example up to 30px you can add additional CSS style definitions to your page which overwrite the settings from ui.jqgrid.css. For example the following demo (and another one which uses no searching operations) uses the following styles
.ui-jqgrid .ui-search-table { height: 30px; }
.ui-jqgrid .ui-search-table .ui-search-oper { height: 30px; }
.ui-jqgrid .ui-jqgrid-htable .ui-search-toolbar th { height: 32px; }
It displays
I added to the demos the style described in the answer too just to improve the visibility of the input fields.
Can i add Red Border to Kendo UI date picker if validation fails
function onChange(e) {
if (e.date == undefined) {
var item = $(this).find('.t-input').val('Incorrect date!');
}
}
I have this onChange Method and trying to add red border. Can anyone help me or suggest a better solution
Adding this CSS should work:
#datepicker[aria-invalid] {
border: 1px solid #f00;
}
Here is an example:
jsbin.
Unfortunately, you cannot do this with Kendo UI.
Kendo UI elements do not allow you to do this.
I did data binding with the style sheets on a kendo widget.
Firebug will inform you that it is not possible.
I will open a ticket with my telerik support account now and come back to you.
I would also like to do the same thing.
$('input[aria-owns=txt-orderedTime_timeview]').closest(".k-picker-wrap.k-state-default").css("border-color", '#ff0000');
OR
$("#txt-orderedTime").data("kendoTimePicker").wrapper.find(".k-picker-wrap.k-state-default").addClass("validationErrorClass");
.validationErrorClass {
border-color: #ff0000 !important;
}
This may seem like a basic question, but I'm having trouble figuring out how to set the table width to 100% on a YUI datatable.
I tried doing
#dtContainer {
width: 100%;
}
#dtContainer table {
width: 100%
}
but none of these approaches work.
To clarify, I am trying to set the datatable width to 100% when the table is empty and the empty message is displayed.
The generated table is an HTML table; so, I thought this should work.
Dont use .yui-dt table { width:100%;} , It doesn't appear to set the column widths correctly. Use myDataTable.setAttributes({width:"100%"},true); after table render
It turns out the solution is really simple:
.yui-dt table
{
width: 100%;
}
this is an ugly solution. but it works
<script>
window.onload = function() {
setTimeout('document.getElementById("NAME OF CONTAINER DIV").childNodes[1].style.width
= "100%"',1000);
};
</script>
the problem is applying the style pre render is pointless, the javascript is building the table, post render is all I could get to work.
looks like this little style tag works magic:
.yui-dt table { width:100%;}
To maintain aspect ratio across various screens with different resolutions, I had to manually set the column width as percentages that summed up to 100%.
<style type="text/css">
/* YUI Individual Column Width */
#dvAutoWidthList .yui-dt-col-Col1{width: 35%;}
#dvAutoWidthList .yui-dt-col-Col2{width: 10%;}
#dvAutoWidthList .yui-dt-col-Col3{width: 15%;}
#dvAutoWidthList .yui-dt-col-Col4, .yui-dt-col-Col5, .yui-dt-col-Col6, .yui-dt-col-Col7 {width: 10%;}
</style>
PS: Might not be the best way to do this, but it solved my problem!
Kwex.
var dataTable = new Y.DataTable(
{
columns: cols,
data: remoteData,
width: '100%',
}
).render('#dataTable ');
This should do the trick. Worked for me AUI 2.5.1