Hi,
My colleague has passed this issue to me. What can I advise him? He has also posted to Stack Overflow: http://stackoverflow.com/questions/27127078/kendo-datepicker-z-index
I have a dynamically generated list of inputs inside a kendo accordion panel.The inputs are generated like this:
Some of these inputs are dates which are turned into Kendo date pickers :
The problem I am facing is the date popup is appearing beneath the panel (Or anything outside of the li it is in.I have tried this:
If I break the script by calling $('.datepicker').bob it breaks the script and therefore works (But obviously breaks the rest of the javascript functionality too.I have also tried this:
I have also tried changing the style:position: relative; z-index: 100000; And now I am completely out of ideas.Is anyone able to help me?
Many thanks
My colleague has passed this issue to me. What can I advise him? He has also posted to Stack Overflow: http://stackoverflow.com/questions/27127078/kendo-datepicker-z-index
I have a dynamically generated list of inputs inside a kendo accordion panel.The inputs are generated like this:
rowContent +=
"<td><input "
+ checked +
" class='"
+ field.FieldTypeInput +
"' type='"
+ field.FieldTypeInput +
"' id='FldList_"
+ rowLength +
"__UpdatedValue' value='"
+ currentValue +
"' name='FldList["
+ rowLength +
"].UpdatedValue' ></td>"
;
Some of these inputs are dates which are turned into Kendo date pickers :
$(
'.datepicker'
).kendoDatePicker();
The problem I am facing is the date popup is appearing beneath the panel (Or anything outside of the li it is in.I have tried this:
$(
'.datepicker'
).kendoDatePicker({
open:
function
() { setTimeout(
function
() {
$(
'.ui-datepicker'
).css(
'z-index'
, 8888);
}, 1);
}
});
If I break the script by calling $('.datepicker').bob it breaks the script and therefore works (But obviously breaks the rest of the javascript functionality too.I have also tried this:
$(
"input[type=date]"
).kendoDatePicker({
open:
function
(e)
{
window.setTimeout(
function
(){ $(
".k-calendar-container"
).parent(
".k-animation-container"
).css(
"zIndex"
,
"11000"
); }, 1);
}
});
I have also tried changing the style:position: relative; z-index: 100000; And now I am completely out of ideas.Is anyone able to help me?
Many thanks