JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="vertical" style="height:100%;border:0;">
<div>
<select id="size">
<option>S - 6 3/4"</option>
<option>M - 7 1/4"</option>
<option>L - 7 1/8"</option>
<option>XL - 7 5/8"</option>
</select>
</div>
<div>
<div id="horizontal" style="height: 100%; width: 100%;">
<div>
<p>
Inner splitter :: left pane
</p>
</div>
<div>
<p>
Inner splitter :: right pane
</p>
</div>
</div>
</div>
</div>
CSS
html,body
{
height:100%;
margin:0;
padding:0px;
}
html
{
overflow:hidden;
}
JavaScript
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, size: "25px" },
{ collapsible: false } ]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: false},
{ collapsible: false, size: "200px" } ]
});function triggerResize() {
$("#vertical").data("kendoSplitter").trigger("resize");
}
$("#size").kendoDropDownList();
$(window).resize(triggerResize);