Splitter and the z-index

[Jacob]

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

[Dimo]

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

 

 

[Jacob]

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!

[Will]

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;
}

 

[Dimo]

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

 

 

[Will]

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>

 

[Dimo]

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

 

 

[Will]

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

[Will]

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

[Will]

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

[Dimo]

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