splitter - overlap

2 posts, 0 answers
  1. Li-raz
    Li-raz avatar
    3 posts
    Member since:
    May 2012

    Posted 04 Mar 2014 Link to this post

    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>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 06 Mar 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top