Higher index for modal window

5 posts, 0 answers
  1. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 03 Sep Link to this post

    How can I achieve that all modal windows (and all .k-overlay) has z-index greater then 100000? Basically I want to increase z-index for constant(100000) if window is modal.
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 06 Sep Link to this post

    Hello Matjaž,

    You can overwrite the default Kendo UI styles like this:

    .k-overlay {
    z-index: 100000 !important;
    }
         
    .k-widget.k-window {
    z-index: 100001 !important;
    }

    http://dojo.telerik.com/OyEDEC

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 13 Sep Link to this post

    No, it does not since I need this only for modal windows.
  5. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 13 Sep Link to this post

    I found solution in adding code to toFront method:

    toFront: function (e) {
         var that = this, wrapper = that.wrapper, ...
         if (this.options.modal === true)
                zIndex += 100000;

    But I would really like to see kendo solution, since modifying source code is the worst solution if you regularly update sources.

  6. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 15 Sep Link to this post

    Hello Matjaž,

    You can use the following selector to apply CSS rules only to a modal window:
    .k-overlay,
    .k-overlay + .k-window {
        z-index: 100000;
    }

    Regards,
    Magdalena
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready