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>
<!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
0
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
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!