This is a migrated thread and some comments may be shown as answers.

z-index lower then window's (not acceptable)

16 Answers 865 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Matjaz
Top achievements
Rank 1
Matjaz asked on 27 Jul 2014, 05:39 AM
Menu open beneath the window dojo.
I don't think this is wanted behaviour.

16 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 28 Jul 2014, 08:32 AM
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!
 
0
Matjaz
Top achievements
Rank 1
answered on 28 Jul 2014, 08:44 AM
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.
0
Matjaz
Top achievements
Rank 1
answered on 28 Jul 2014, 08:45 AM
"that this things wouldn't happened."
0
Dimo
Telerik team
answered on 28 Jul 2014, 08:59 AM
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!
 
0
Matjaz
Top achievements
Rank 1
answered on 28 Jul 2014, 03:12 PM
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 
unfortunately 
0
Dimo
Telerik team
answered on 30 Jul 2014, 08:13 AM
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!
 
0
Garry
Top achievements
Rank 2
Veteran
answered on 26 Apr 2016, 09:39 AM
All theory and no actual fix for this problem in this thread!
0
Dimo
Telerik team
answered on 26 Apr 2016, 10:15 AM
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!
0
Marc
Top achievements
Rank 1
answered on 14 Feb 2017, 02:11 PM

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? 

0
Dimo
Telerik team
answered on 15 Feb 2017, 09:59 AM
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.
0
Marc
Top achievements
Rank 1
answered on 15 Feb 2017, 11:33 AM

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

0
Dimo
Telerik team
answered on 15 Feb 2017, 12:00 PM
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.
0
Marc
Top achievements
Rank 1
answered on 15 Feb 2017, 12:35 PM

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?

0
Dimo
Telerik team
answered on 17 Feb 2017, 09:29 AM
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.
0
Marc
Top achievements
Rank 1
answered on 17 Feb 2017, 12:37 PM

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

0
Dimo
Telerik team
answered on 17 Feb 2017, 02:12 PM
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.
Tags
Menu
Asked by
Matjaz
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Matjaz
Top achievements
Rank 1
Garry
Top achievements
Rank 2
Veteran
Marc
Top achievements
Rank 1
Share this question
or