Splitter and the z-index

11 posts, 0 answers
  1. Jacob
    Jacob avatar
    23 posts
    Member since:
    Oct 2011

    Posted 31 Oct 2011 Link to this post

    Hi!

    I use Splitter to separate the screen estate to create a top bar pane and a main content pane. The code looks like this:

    $('#splitterTopBottom').kendoSplitter({
            panes: [
                {
                    size: "50px",
                    resizable: false,
                    collapsible: false
                }
            ],
            orientation: "vertical",
            collapse: paneCollapseCallback,
            expand: paneExpandCallback,
        });

    So far so good. 

    As you see, I want the top bar to be 50px high and not resizable/collapsible. The thing is that the top bar will hold several menu items (kendoMenu) that will slide down on mouse over to show its content. The problem is that the content gets cut off where the top bar pane ends. 

    I thought it was simple to fix with z-index, so I put a z-index of 99999 on the menu container. This didn't help though. I can not figure out how to make something inside a pane to appear outside (e.g. tooltips, or menu items). How should this be done?

    Thanks in advance.

    /Jacob

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 31 Oct 2011 Link to this post

    Hello Jacob,

    Splitter panes are either scrollable (overflow:auto) or they clip overflowing content (overflow:hidden). You need to set an overflow:visible style to the Splitter pane, which holds the Menu. In addition, a positive z-index is required, so that the Menu pane is placed in a higher stacking context with regard to subsequent Splitter panes.

                    <div id="pane1" style="overflow:visible;z-index:2">
                        <ul id="menu1">
                          ...............
                        </ul>
                    </div>

    If there are several nested Splitters, then each pane, which is an ancestor of the Menu, requires the above styles.

    Regards,
    Dimo
    the Telerik team
     
    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. Jacob
    Jacob avatar
    23 posts
    Member since:
    Oct 2011

    Posted 31 Oct 2011 Link to this post

    Ok, I'll need to find a work around then, cause I have sat overflow: hidden for the top menu pane as I didn't want its scrollbar to show. I'll see if I can fix it by putting the overflow: hidden on an inner div instead for on the pane itself.

    Thanks for your answer!
  5. Will
    Will avatar
    34 posts
    Member since:
    Oct 2013

    Posted 30 May 2014 Link to this post

    Sorry but Dimo's answer is wrong.   Take a look at:

    http://telerik.org/forums/adjust-z-index-or-some-other-magic

    Audrey's suggestion has worked for me:
    .k-splitter .k-scrollable
    {
        overflow: visible;
    }

     
  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 30 May 2014 Link to this post

    Hello Will,

    My answer suggests exactly the same thing as the code you have quoted, so I don't see anything wrong here. In addition, if you omit the z-index style, you may still have problems in particular scenarios, because subsequent Splitter panes create higher stacking contexts and the Menu groups cannot overlap them.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Will
    Will avatar
    34 posts
    Member since:
    Oct 2013

    Posted 30 May 2014 in reply to Dimo Link to this post

    Sorry if my frustration caused me to jump the gun on this but I followed your suggestion and it had no effect.  I systematically tried adding the style attributes on each of the <div>s, the <nav> tag and finally on the <ul> itself with no effect. I'm assuming, although I haven't taken the additional time to verify, that the suggestion by Audrey applies to the Splitter bar itself, not the pane.  All I can say is that I did my best to use your approach first and it did not work for me.  The other approach did.

    <div id="horizontalNavSplitter" style="height: 800px; width: 100%;">
                <div id="left-pane" class="k-block">
                    <div class="pane-content" style="overflow: visible; z-index: 10000;">
                        <nav role="navigation">
                            <ul id="siteMenuVertical" style="overflow: visible; z-index: 10000;"></ul>
                        </nav>
                    </div>
                </div>
                <div id="right-pane" >
                    <div class="pane-content">
     
                        <div id="notificationContainer" class="k-content">
                            <span id="notification"></span>  @*style="display:none;"*@
                        </div>
     
                        <section class="content-wrapper main-content clear-fix">
                            @RenderBody()
                        </section>
     
                    </div>
                </div>
            </div>
     
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 31 May 2014 Link to this post

    Hello Will,

    As suggested earlier, the overflow and z-index styles are required by the Menu's parent Splitter pane <div>.

    Judging by the provided code snippet, this is div#left-pane. The div#pane-content element does not need those styles, or at least there is no such evidence.

    On a side note, applying an overflow:visible style to all Splitter scrollable panes via the .k-scrollable class will break all Splitter panes that actually need to be scrollable, so I don't recommend it.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Will
    Will avatar
    34 posts
    Member since:
    Oct 2013

    Posted 02 Jun 2014 in reply to Dimo Link to this post

    Hi Dimo,

    I've gone back and carefully followed your suggestions, removing the CSS mentioned above.
    <!-- Kendo UI Horizontal Splitter Panes -->
    <div id="horizontalNavSplitter" style="height: 800px; width: 100%;">
        <div id="left-pane" style="overflow: visible; z-index: 10000;">
            <div class="pane-content">
                <nav role="navigation">
                    <ul id="siteMenuVertical"></ul>
                </nav>
            </div>
        </div>
      
    Using IE 11 Developer Tools I can see that the Kendo JS is applying the classes k-pane and k-scrollable and is also negating my overflow setting.

    <div class="k-pane k-scrollable" id="left-pane" role="group" style="left: 0px; top: 0px; width: 185px; height: 800px; position: absolute; z-index: 10000;">
     
    From kendo.common-bootstrap.css line# 5049:
    .k-splitter .k-scrollable {
      overflow: auto;
    }

    The result is that when the Menu displays it's second level, the scroll bar appears at the bottom of the pane but the Menu's second level is almost completely hidden.

    What would you suggest as a next step?

    Thanks,
    Will



  10. Will
    Will avatar
    34 posts
    Member since:
    Oct 2013

    Posted 02 Jun 2014 in reply to Will Link to this post

    Hi again,

    This seems to work:

    .k-splitter > .k-pane.k-scrollable
    {
        overflow: visible;
    }


    Does it look safe to you as far as unintended side effects?

    Will
  11. Will
    Will avatar
    34 posts
    Member since:
    Oct 2013

    Posted 02 Jun 2014 Link to this post

    One more time . . . By adding another CSS class, 'inhibitScrolling', I've preserved the scrolling in the right pane while getting the desired behavior in the left pane:

    <div id="left-pane" class="inhibitScrolling" style="overflow: visible; z-index: 10000;">

    and then:

    .k-splitter > .inhibitScrolling.k-pane.k-scrollable
    {
        overflow: visible;
    }

    Better?

    Will

  12. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Jun 2014 Link to this post

    Hello Will,

    Yes, using custom classes is better than applying the required custom styles to all panes, which is not needed.

    I recommend getting familiar with the concept of CSS specificity:

    http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

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

    In this way you will know how many CSS classes a selector needs in order to override a style in our CSS code. Alternatively, use the #left-pane ID instead of multiple CSS classes for a simple and short selector.

    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