Потеря вертикального сплиттера при расширении верхней панели до 100%
Когда я иду, чтобы расширить верхнюю панель на полную высоту, вертикальная разделительная полоса переходит в нижнюю часть, и я не могу добраться до нее. Когда я прослеживаю его в html, я вижу, что верхняя часть выше окна, но не уверена, где ее изменить, поэтому, когда я расширяю верхнюю панель до полной высоты, она находится внизу окна, где я могу получить к ней доступ.
$(document).ready(function() {
//RunTopBottomGrids();
RunMySplitters();
$('#vertical').trigger("resize");
});
$(window).resize(function() {
$('.sp-wrapper').height($(window).height() - 84);
});
function RunMySplitters() {
let splitterPosition = "middle";
$("#vertical")
.kendoSplitter({
orientation: "vertical",
panes: [{
collapsible: false
}]
});
$("#horizontal")
.kendoSplitter({
panes: [{
collapsible: true,
size: "10%",
collapsed: false
},
{
collapsible: true,
size: "90%"
}
],
collapse: function(e) {},
resize: function(e) {
},
expand: function(e) {
}
});
let hSplitterBar = $('#horizontal').data("kendoSplitter");
hSplitterBar.max("#left-pane", "10%");
$("#innerVertical")
.kendoSplitter({
orientation: "vertical",
panes: [{
collapsible: true,
size: '50%'
},
{
collapsible: true,
size: '50%',
}
],
collapse: function(e) {
if (e.pane.id === "top-pane" && splitterPosition === "bottom") {
splitterPosition = "middle";
} else if (e.pane.id === "top-pane" && splitterPosition === "middle") {
splitterPosition = "top";
} else if (e.pane.id === "bottom-pane" && splitterPosition === "top") {
splitterPosition = "middle";
} else if (e.pane.id === "bottom-pane" && splitterPosition === "middle") {
splitterPosition = "bottom";
}
AdjustVerticalInnerSplitter(splitterPosition);
},
resize: function(e) {},
expand: function(e) {
if (e.pane.id === "top-pane" && splitterPosition === "top") {
splitterPosition = "middle";
} else if (e.pane.id === "top-pane" && splitterPosition === "middle") {
splitterPosition = "bottom";
} else if (e.pane.id === "bottom-pane" && splitterPosition === "bottom") {
splitterPosition = "middle";
} else if (e.pane.id === "bottom-pane" && splitterPosition === "middle") {
splitterPosition = "top";
}
AdjustVerticalInnerSplitter(splitterPosition);
}
});
let topBar = $('#innerVertical').data("kendoSplitter");
topBar.max("#top-pane", "75%");
topBar.max("#bottom-pane", "75%");
}
function AdjustVerticalInnerSplitter(collapseType) {
var splitter = $("#innerVertical").data("kendoSplitter");
var catalogGrid;
var qeGrid;
switch (collapseType) {
case "top":
splitter.expand("#bottom-pane");
splitter.size("#bottom-pane", "100%");
splitter.size("#top-pane", "0%");
splitterPosition = "top";
break;
case "bottom":
splitter.expand("#top-pane");
splitter.collapse("#bottom-pane");
splitterPosition = "bottom";
$('#right-pane').css('top', '0px');
break;
default:
splitter.expand("#bottom-pane");
splitter.expand("#top-pane");
splitter.size("#bottom-pane", "49%");
splitter.size("#top-pane", "47.5%");
$('#right-pane').css('top', '0px');
splitterPosition = "middle";
break;
}
}
.sp-wrapper {
border: 1px solid black;
margin-top: 30px !important;
}
#horizontal .k-icon.k-collapse-prev.k-i-arrow-60-left {
display: none;
}
#horizontal .k-icon.k-collapse-next.k-i-arrow-60-right {
display: none;
}
#horizontal,
#vertical,
#innerVertical {
height: 100%;
}
.body-content {
padding-left: 0px !important;
padding-right: 0px !important;
}
#right-pane {
margin-top: 27px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div class="sp-wrapper">
<div id="vertical" style="height:100%;">
<div id="top-pane">
<div id="horizontal">
<div id="left-pane" style="border: 1px solid yellow;background-color: yellow;">
<div class="pane-content"></div>
</div>
<div id="right-pane">
<div id="innerVertical">
<div id="top-pane" style="width: 100%;border: 1px solid blue;background-color: blue;">
<div class="pane-content">
<div id="TopGrid"></div>
</div>
</div>
<div id="bottom-pane" style="width: 100%;border: 1px solid green;background-color: green;">
<div class="pane-content">
<div id="BottomGrid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>