kendo.ui.progress & z-index of Kendo widgets

5 posts, 1 answers
  1. Mickie
    Mickie avatar
    4 posts
    Member since:
    May 2012

    Posted 23 May 2012 Link to this post

    I am using a Kendo window for a data entry form and when saving changes I want to call the same overlay with loading image that the Kendo grid is using.

    I put in a div in my Kendo window:

        <div id="divTest">

    In my save changes function I am calling kendo.ui.progress:

        var divTest= $("#divTest");
        kendo.ui.progress(divTest, true);

    Then I have a callback after the save where I turn it off with the same code above except for sending in false.

    This works great.  Except that I have a number of Kendo widgets on my window (Slider, NumericTextbox, DatePicker) and everything else on the window is blocked except for these widgets due to their z-index, so these appear on top of the overlay.

    We have a css file that we load after kendo.common.css, and we use this when we want to override styles in kendo.common.css.

    So, in there I have the following (right now I'm using 99999 for testing; just wanted to set it to something I knew would be higher than the widgets):

            z-index: 99999;

    This seems to work fine and resolves the issue, but I just wanted to see if this would be a recommended approach or if I'm missing something else I can do here?

    Thank you.
  2. Answer
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 03 Apr 2013 Link to this post

    Mickie, we ran into the exact same problem as you and came to the same solution. We use Twitter Bootstrap and noticed that Bootstrap elements (widgets, dropdowns, etc.) were appearing above the .k-loading-mask div as well. But yes, setting the z-index of the k-loading-mask to 9999 fixes this issue.
  3. Mickie
    Mickie avatar
    4 posts
    Member since:
    May 2012

    Posted 05 Jun 2013 Link to this post

    Hi John - thanks for posting up that this is what you did as well; I wanted to make sure I wasn't missing anything here.
  4. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 26 Apr Link to this post

    Nope - not working for me.
  5. Dimo
    Dimo avatar
    8320 posts

    Posted 29 Apr Link to this post

    Hello Garry,

    How elements stack on top of one another depends on the z-index styles and the stacking contexts.

    The first post above shows how to set an arbitrary z-index style to Kendo UI loading overlay:

        z-index: 99999;

    However, if the overlay itself is placed inside a lower stacking context, it will not be able to cover elements from a higher stacking context. In this case you will also need to apply z-index styles to other ancestor elements, so that the stacking contexts' are rearranged.

    If you need further assistance with this, please send an example, so that I can get familiar with the scenario and provide specific advice.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top