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

[Mickie]

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">
    </div>

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):

    .k-loading-mask
    {
        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.

[JohnVS]

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.

[Mickie]

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.

[Garry]

Nope - not working for me.

[Dimo]

Hello Garry,

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

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

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

.k-loading-mask
{
    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.

Regards,
Dimo
Telerik