Menu being covered by grid when slid in

3 posts, 0 answers
  1. Steve
    Steve avatar
    3 posts
    Member since:
    Mar 2014

    Posted 05 Sep 2014 Link to this post

    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:
    • 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. Dimo
    Dimo avatar
    8486 posts

    Posted 08 Sep 2014 Link to this post

    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.

    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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Steve
    Steve avatar
    3 posts
    Member since:
    Mar 2014

    Posted 08 Sep 2014 in reply to Dimo Link to this post


    Wonder why that didn't seem to work when I was assigning z-indexes the other day?  Oh well, it works now.

Back to Top