Sorry if this isn't the appropriate forum. I have several elements interacting here as you will see...
Imagine a page with a simple search form and a grid containing the results of the search. The grid is hidden by default and only shown when needed.
I have a menu that is hidden at the top of the page. The menu is slid in using kendo.fx().slideIn() when the user clicks a handle (similar to the SlideIn demo, but from the top). This works perfectly until the search grid is shown.
Once the search grid is shown, it covers up the menu when the menu is also shown (see attached coveredMenu.png). I've also attached some of the relevant HTML (see attached coveredMenuHtml.png).
Through experimentation, I've determined the following:
Imagine a page with a simple search form and a grid containing the results of the search. The grid is hidden by default and only shown when needed.
I have a menu that is hidden at the top of the page. The menu is slid in using kendo.fx().slideIn() when the user clicks a handle (similar to the SlideIn demo, but from the top). This works perfectly until the search grid is shown.
Once the search grid is shown, it covers up the menu when the menu is also shown (see attached coveredMenu.png). I've also attached some of the relevant HTML (see attached coveredMenuHtml.png).
Through experimentation, I've determined the following:
- IE11 and Firefox both exhibit the same behavior. Haven't tested other browsers.
- If the menu is not slid in, everything works fine.
- By playing with paddings, I can see that the element causing the problem is the <div class="k-grid k-widget"> gird container.
- Playing with z-indexes for the grid and menu makes no difference in this behavior.
So how can I accomplish sliding the menu in without it being covered?