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

splitter - overlap

1 Answer 90 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Li-raz
Top achievements
Rank 1
Li-raz asked on 04 Mar 2014, 03:34 PM
I am new with kendoUI, I have created a splitter and added inside one of the panels a dropdown item, however when i open the drop down , it seems that its z-index is lower then the splitter, no matter how i try to change all the z-indexes nothing helps

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
       
    </script>
   
   
</head>
<body>
   
        <a class="offline-button" href="../index.html">Back</a>
   
        <div>
             <ul id="menu1">
                                    <li>
                                        First Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Second Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Third Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Fourth Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Fifth Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                </ul>
            <div id="example" class="k-content">
            <div id="vertical">
                <div id="top-pane">
                    <div id="horizontal" style="height: 100%; width: 100%;">
                        <div id="left-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / left pane</h3>
                                <p>Resizable and collapsible.</p>
                            </div>
                        </div>
                        <div id="center-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / center pane</h3>
                                <p>Resizable only.</p>
                                <ul id="menu">
                                    <li>
                                        First Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Second Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Third Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Fourth Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                    <li>
                                        Fifth Item
                                        <ul>
                                            <li>Sub Item 1</li>
                                            <li>Sub Item 2</li>
                                            <li>Sub Item 3</li>
                                            <li>Sub Item 4</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="right-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / right pane</h3>
                                <p>Resizable and collapsible.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="middle-pane">
                    <div class="pane-content">
                        <h3>Outer splitter / middle pane</h3>
                        <p>Resizable only.</p>
                    </div>
                </div>
                <div id="bottom-pane">
                    <div class="pane-content">
                        <h3>Outer splitter / bottom pane</h3>
                        <p>Non-resizable and non-collapsible.</p>
                    </div>
                </div>
            </div>            <script>
                $(document).ready(function() {
                    $("#vertical").kendoSplitter({
                        orientation: "vertical",
                        panes: [
                            { collapsible: false },
                            { collapsible: false, size: "100px" },
                            { collapsible: false, resizable: false, size: "100px" }
                        ]
                    });                    $("#horizontal").kendoSplitter({
                        panes: [
                            { collapsible: true, size: "220px" },
                            { collapsible: false },
                            { collapsible: true, size: "220px" }
                        ]
                    });                    $("#menu").kendoMenu();
                    $("#menu1").kendoMenu();
                });
            </script>            <style scoped>
                #vertical {
                    height: 380px;
                    width: 700px;
                    margin: 0 auto;
                }                #middle-pane { background-color: rgba(60, 70, 80, 0.10); }
                #bottom-pane { background-color: rgba(60, 70, 80, 0.15); }
                #left-pane, #center-pane, #right-pane  { background-color: rgba(60, 70, 80, 0.05); }                .pane-content {
                    padding: 0 10px;
                }
            </style>
        </div>
        </div>
         
   
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 06 Mar 2014, 09:10 AM
Hello Li-raz,

I already replied to the same question in your support ticket, however I am pasting my answer here too:

By design Splitter menu panes are either scrollable or they trim the overflowing content. In order to make the content to overflow you should set overflow:visible to the Menu parent panes. For your convenience I prepared a simple jsBin examplewhich demonstrates the suggested approach in action - please check it and let me know if this fits your requirements or in case I can assist you further. Wish you a great day!

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Splitter
Asked by
Li-raz
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or