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?
2 Answers, 1 is accepted
0
Hi Steve,
The observed problem is caused by the fact that the Grid is in a higher stacking context than the Menu. The resolution is to increase the Menu's stacking context.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
Depending on your scenario and page HTML, you may need to do one of the following:
1. Set a position:relative and some z-index to the Menu element
2. Set those styles to a Menu ancestor, which is a sibling to a Grid ancestor (that would be divInfoMenuContainer)
I can't say which of the two scenarios is applicable to your implementation, because the problem is not reproduced in a simple case with a Menu and a Grid, so you are probably using a layout with custom z-index styles.
Regards,
Dimo
Telerik
The observed problem is caused by the fact that the Grid is in a higher stacking context than the Menu. The resolution is to increase the Menu's stacking context.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
Depending on your scenario and page HTML, you may need to do one of the following:
1. Set a position:relative and some z-index to the Menu element
2. Set those styles to a Menu ancestor, which is a sibling to a Grid ancestor (that would be divInfoMenuContainer)
I can't say which of the two scenarios is applicable to your implementation, because the problem is not reproduced in a simple case with a Menu and a Grid, so you are probably using a layout with custom z-index styles.
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 1
Rank 1
answered on 08 Sep 2014, 07:52 PM
:-o
Wonder why that didn't seem to work when I was assigning z-indexes the other day? Oh well, it works now.
Thanks.
Wonder why that didn't seem to work when I was assigning z-indexes the other day? Oh well, it works now.
Thanks.