I have a div inside of a kendo window that dynamically gets loaded with the search results for persons in the system matching a search string.
For example, looking at image es1.jpg, this displays the search results of '123' for the position 'Operations Position 2'. This result list only has 5 results and displays just fine because its content does not exceed the size of the window.
However, looking at image es2.jpg, this displays the same search results but for the position 'Loss Prevention Position 1'. Because this position sits 2 rows below the previous position in the form layout, the same result list exceeds the dimensions of the window, and we get the scroll bars.
What I want to happen is for the result list to always display on top of the window, similar to what the kendo autocomplete result list displays, which you can see in the image es3.jpg. This image displays the results of a kendo autocomplete returning a search on stores that have '111' in the name. This list exceeds the window size and displays ON TOP of the window, not inside the window.
I need to do the same with thing with person search as shown in es1.jpg and es2.jpg.
How can I do this? I've played with z-index of the divs but nothing seems to work.
Thanks for any help you can provide.
Rob
1 Answer, 1 is accepted
There are no images attached to your message, but I got the idea.
The AutoComplete dropdown is detached from the original widget DOM position, i.e. the dropdown is not inside the Kendo UI Window, but a child of the page <body>. This allows the dropdown to be displayed in such a way, so that it looks like overflowing the Kendo UI Window. Actually, the dropdown and the Kendo UI Window are completely unrelated.
Elements, which are inside the Kendo UI Window cannot overflow it in the same manner, because the Window is scrollable by default. Theoretically, you can disable the Window's scrollability with CSS, however, I am not sure that this will produce any desirable result:
#WindowID { overflow: visible;}Regards,
Dimo
Telerik