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 Answers, 1 is accepted
0
Alice
Top achievements
Rank 2
Rank 2
answered on 03 Dec 2018, 10:11 PM
Sorry, the code URL should be https://stackblitz.com/edit/react-emp7kp?file=app%2Fmain.js
0
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:
or
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
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