z-index lower then window's (not acceptable) in Kendo UI for jQuery Menu

Matjaz

94 posts

Member since:
Jun 2014

Posted 27 Jul 2014 Link to this post

Menu open beneath the window dojo.
I don't think this is wanted behaviour.

Dimo

Admin

8483 posts

Posted 28 Jul 2014 Link to this post

Hi Matjaz,

You need to increase the z-index of the stacking context, in which the Menu resides, so that it is placed higher than the stacking context of the Window.

Locate the HTML element, which is an ancestor of the Menu and a sibling to the Window (or a sibling to a Window's ancestor), and apply a position:relative and some z-index value greater than 10500. In this particular case this is the #example <div>

<div id="example" style="position: relative; z-index: 11000;">

I highly recommend the following tutorials:

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

Regards,
Dimo
Telerik

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

Matjaz

94 posts

Member since:
Jun 2014

Posted 28 Jul 2014 in reply to Dimo Link to this post

First: I am sure I am not the only one, who thinks that default value for kendo widgets should be set in this way, that this things would happend.

Second: It is not acceptable, because it renders over modal div (if I open another modal window). I try to set z-index value between window and modal div, but this property changes, depends how many winows are opened.

Matjaz

94 posts

Member since:
Jun 2014

Posted 28 Jul 2014 in reply to Matjaz Link to this post

"that this things wouldn't happened."

Dimo

Admin

8483 posts

Posted 28 Jul 2014 Link to this post

Hi Matjaz,

When dealing with widget overlay scenarios, I assure you that there are as many different opinions and preferences, as a number of cases, so we can't meet all conflicting requirements out-of-the-box.

For example, one may claim that a draggable popup Window, which is opened after the Menu is created, should be on top of the Menu.

The Menu groups (dropdowns) are descendants of the respective root items. If you get familiar with the provided tutorial, you will understand why it is not possible to make the Menu dropdowns appear over the Window, while at the same time make the Window appear over the root Menu items.

My recommendation is to leave the behavior as it is by default, i.e. allow the Window to be on top of the Menu. You can enable the Window's modality in order to prevent user confusion.

Regards,
Dimo
Telerik

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

Matjaz

94 posts

Member since:
Jun 2014

Posted 28 Jul 2014 in reply to Dimo Link to this post

Unfortunately (for me) I must agree with you.

Still, I would really like to see z-index order in: window, menu, modal overview, modal window.
Is there any way I can achieve that. It would be easier if window and modal overview (div) shouldn't be so close, so I could insert menu. But they are so close and not fixed (I think I know why).

unfortunately

Dimo

Admin

8483 posts

Posted 30 Jul 2014 Link to this post

Hello Matjaz,

I am not sure what is the difference between a "modal overview" and a "modal Window"?

Modal and non-modal Windows behave exactly the same with regard to their z-index style.

The z-index style of each Window is set dynamically in order to handle multiple Window scenarios and bringing the last interacted instance on top of all others. In order to override a Window's z-index, you will need to assign a custom CSS class to the div.k-window element, and apply a z-index style with an !important clause. Please keep in mind that this may lead to undesired side effects when using several Window instances on the same page.

Regards,
Dimo
Telerik

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

Garry

49 posts

Member since:
Sep 2012

Posted 26 Apr 2016 Link to this post

All theory and no actual fix for this problem in this thread!

Dimo

Admin

8483 posts

Posted 26 Apr 2016 Link to this post

Hello Garry,

Here is how to make the Menu expand on top of the Window:

http://dojo.telerik.com/IVewO/2

The Menu element (<ul>) has a position:relative and a z-index styles applied. This makes it create a new stacking context, which is higher than the Window's stacking context. As a result, the expanded item groups appear on top. Without the above two styles, the expanded groups create stacking contexts with no z-index, which means they are lower than the stacking context of the Window.

We think the opposite behavior and requirement is more common, and since the two behaviors cannot be supported at the same time, we are inclined to provide a "Window on top" behavior by design.

Regards,
Dimo
Telerik

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

Marc

171 posts

Member since:
Sep 2016

Posted 14 Feb 2017 in reply to Dimo Link to this post

This approach does not work when the window is maximized, the kendo-menu child element still appear beneath the window.

Is there any known fix for this?

Dimo

Admin

8483 posts

Posted 15 Feb 2017 Link to this post

Hello Marc,

It is possible to use the Window's maximize and resize events to toggle a custom CSS class, which controls the z-index of the Menu's stacking context. In other words, the high z-index should be applied to a sibling of the WIndow. Here is an example:

http://dojo.telerik.com/adoju

http://docs.telerik.com/kendo-ui/api/javascript/ui/window#events-maximize

http://docs.telerik.com/kendo-ui/api/javascript/ui/window#events-resize

The resize event is fired during maximization too, but before the maximize event.

Regards,
Dimo
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Marc

171 posts

Member since:
Sep 2016

Posted 15 Feb 2017 in reply to Dimo Link to this post

Hi Dimo,

The example does not work. When I maximize the window, and drag it down so that i can see the context menu, the menu items z-index is still below the z-index of the window.

Marc

Dimo

Admin

8483 posts

Posted 15 Feb 2017 Link to this post

Hi Marc,

The idea of a maximized Window is to occupy the whole browser viewport. While the Window is maximized, the <body> has an overflow:hidden style, which removes the browser's scrollbar and prevents the Menu's child groups from expanding in a visible manner.

To prevent the user from dragging a maximized Window, please use the dragstart handler and prevent the event:

http://docs.telerik.com/kendo-ui/api/javascript/ui/window#events-dragstart

dragstart: function(e) {

if (e.sender.options.isMaximized) {

e.preventDefault();

}

Regards,
Dimo
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Marc

171 posts

Member since:
Sep 2016

Posted 15 Feb 2017 in reply to Dimo Link to this post

Hi Dimo,

we have implemented quite complex custom logic to the window resize/minimize/maximize/dragend etc functions so that our "maximized" windows only occupy 95% height of the browser, which means the menu bar is still shown (this is by design).

I'm hoping there is a way for me to set the class of the menu to always have a higher zindex than every other window. I know by design, Kendo handles the z-index of the window (I believe it starts around 10000) and increments each time a certain window action is fired. Is there a way for me to overwrite the zindex/class of the menu, so that I can assign it a z-index of 999999 for instance?

Dimo

Admin

8483 posts

Posted 17 Feb 2017 Link to this post

Hi Marc,

So if I understand correctly, the Menu is always visible and never behind the Window, even if the Window is maximized? This can be easily achieved if you take the previously provided example...

http://dojo.telerik.com/adoju

... then remove the resize and maximize handlers and move the custom high z-index from #example to the Menu <ul>.

http://dojo.telerik.com/adoju/2

On the other hand, this is a tricky scenario, assuming that the Window can be moved around the screen, because it may end up being overlaying the Menu. In this case, the Menu should fall behind the Window, but you will need to detect the situation and reduce the Menu's z-index on the fly. The latter represents a custom behavior that can be accomplished by using the Window's dragend event.

http://docs.telerik.com/kendo-ui/api/javascript/ui/window#events-dragend

Calculate the position of the Window and Menu wrappers and adjust the Menu z-index accordingly.

http://docs.telerik.com/kendo-ui/intro/widget-basics/wrapper-element

Surely, it is also possible to set a high-enough z-index to the Menu <ul>, so that it is always above the Window.

On a side note, I recommend sharing all important aspects of a given scenario in advance. This will help us provide more up-to-the-point answers, and reduce unnecessary message round-trips.

Regards,
Dimo
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Marc

171 posts

Member since:
Sep 2016

Posted 17 Feb 2017 in reply to Dimo Link to this post

Hi Dimo,

Sorry about the lack of information! I have tried your solution and it does not work for me.

Let me give you the whole picture, and hopefully we can come to some kind of resolution.

I have a screen, with around 10 kendo windows in. We have a header (top: 0, height 45px) and a footer (top: window height - 45, height 45).

We have custom functions for resize, dragend, maximize, minimize and restore. This is so we can handle the window management ourselves. (For instance, when we maximize, we check if the window has a kendo spreadsheet inside, and we resize the spreadsheet to fit the entire window here).

Our maximize function will maximize the window to the whole viewport size, minus the height of the header and footer.

Inside our header we have a kendo menu, (as shown in the screenshot).

Whena window is maximized the list items of the menu (second level ones) are shown behind the window. I tried with your solution but it doesnt work.

First screenshot - shows the menu items with a higher zindex than the windows.

Second screenshot (the window is maximized, I have just moved it) - you can see the menu items are behind the window, and behind the grey area (body).

Thanks

Marc

Dimo

Admin

8483 posts

Posted 17 Feb 2017 Link to this post

Hello Marc,

My assumption is that apart from the Menu and Windows, there is no other content in the page <body>. When there is a maximized Window, the <body> gets an overflow:hidden style. If the <body> is short, the Menu cannot expand beyond its boundaries.

You can observe the same problem in my example, if you remove the text content between the Menu and Window. The solution is to have some content below the Menu, or apply a min-height style to the <body>.

Regards,
Dimo
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.