DatePicker Calendar Displays Below Window When DatePicker Is Placed in the Window Wrapper

3 posts, 0 answers
  1. Alice
    Alice avatar
    6 posts
    Member since:
    Apr 2015

    Posted 03 Dec 2018 Link to this post

    Hi,

    I'm not sure if this is best placed in the wrapper forum or the general forum, but my problem is that when I place a Kendo React DatePicker inside a Kendo Window React Wrapper, the calendar is displayed below the window when the user tries to change the date.

    Example: https://react-emp7kp.stackblitz.io/

    Code: https://stackblitz.com/edit/react-emp7kp

    If I use the DatePicker wrapper instead, it works fine.

    Thanks,

    Alice

  2. Alice
    Alice avatar
    6 posts
    Member since:
    Apr 2015

    Posted 03 Dec 2018 in reply to Alice Link to this post

  3. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 04 Dec 2018 Link to this post

    Hello, Alice,

    The issue occurs due to the difference in the z-index value of the Window and the Popup of the DatePicker.

    The following CSS will fix it:

    .k-window {
      z-index: 99 !important;
    }

    or

    .k-animation-container {
      z-index: 10005 !important;
    }

    I noticed another issue when the icon in the DatePicker is clicked that will not close it. This is due to the Window getting the focus.

    We are working on the native Window component that is already in the test stage, and we can recommend waiting for it if it is possible.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top