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

9 posts, 0 answers
  1. Matjaz
    Matjaz avatar
    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.
  2. Dimo
    Admin
    Dimo avatar
    8333 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!
     
  3. Kendo UI is VS 2017 Ready
  4. Matjaz
    Matjaz avatar
    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.
  5. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

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

    "that this things wouldn't happened."
  6. Dimo
    Admin
    Dimo avatar
    8333 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!
     
  7. Matjaz
    Matjaz avatar
    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 
    unfortunately 
  8. Dimo
    Admin
    Dimo avatar
    8333 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!
     
  9. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 26 Apr Link to this post

    All theory and no actual fix for this problem in this thread!
  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Apr 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!
Back to Top
Kendo UI is VS 2017 Ready