KendoDatePicker z-index

2 posts, 0 answers
  1. Bill
    Bill avatar
    7 posts
    Member since:
    Jun 2013

    Posted 25 Nov 2014 Link to this post


    My colleague has passed this issue to me. What can I advise him? He has also posted to Stack Overflow:

    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 :


    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:

        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:

                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
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2543 posts

    Posted 27 Nov 2014 Link to this post

    Hello Bill,

    I am trying to reproduce the same issue, but to no avail. Can you please check the following Dojo sample and let me know what I missed(you can edit it as well)?

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top