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

    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:

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 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)?

    http://dojo.telerik.com/IdEbi

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top