Управление изменением размера кендо-сплиттера в другом разветвителе кендо

Question

У меня есть два разветвителя Kendo на странице. Один сплиттер Kendo находится внутри другого разветвителя Kendo. Мой вопрос заключается в том, как остановить изменение размера дочернего разветвителя Kendo, когда размер сланца родителя Kendo изменяется. Это своего рода необычное поведение, но мне нужно будет заставить его работать.

См., Когда я пытаюсь изменить размер первого сплиттера, второй сплиттер также автоматически изменяет размер. Как я могу остановить изменение размера? может кто угодно?

$("#vertical").kendoSplitter({ 
 
    orientation: "horizontal", 
 
     panes: [ 
 
      { collapsible: true, resizable: true, size: "100px" }, 
 
      { collapsible: true }, 
 
      { collapsible: true, resizable: true, size: "100px" } 
 
     ] 
 
    }); 
 

 
$("#horizontal").kendoSplitter({ 
 
    panes: [ 
 
     { collapsible: true }, 
 
     { collapsible: true }, 
 
     
 
    ] 
 
});

html 
 
{ 
 
    overflow: hidden; 
 
    font: 12px sans-serif; 
 
} 
 

 
html, 
 
body, 
 
#vertical 
 
{ 
 
    height: 100%; 
 
    border-width: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet"/> 
 
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.blueopal.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.web.min.js"></script> 
 

 
<div id="vertical"> 
 
    <div> 
 
     1 
 
    </div> 
 
    <div id="middlePane"> 
 
     <div id="horizontal" style="height: 100%"> 
 
      <div> 
 
       2 
 
       <input type="text" class="k-textbox" /> 
 
      </div> 
 
      <div> 
 
       3 
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Однако, у меня есть способ, чтобы зафиксировать ширину правой панели. Я обновил фрагмент кода. проверьте ниже.

благодаря

$("#vertical").kendoSplitter({ 
 
    orientation: "horizontal", 
 
     panes: [ 
 
      { collapsible: true, resizable: true, size: "50px" }, 
 
     ] 
 
    }); 
 

 
$("#horizontal").kendoSplitter({ 
 
    panes: [ 
 
     { collapsible: true}, 
 
     { collapsible: true} 
 
    ] 
 
}); 
 
var splitter = $("#horizontal").getKendoSplitter(); 
 
splitter.size("#three", 400 + "px");

html 
 
{ 
 
    overflow: hidden; 
 
    font: 12px sans-serif; 
 
} 
 

 
html, 
 
body, 
 
#vertical 
 
{ 
 
    height: 100%; 
 
    border-width: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet"/> 
 
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.blueopal.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.web.min.js"></script> 
 

 
<div id="vertical"> 
 
    <div id="one"> 
 
     1 
 
    </div> 
 
    <div id="middlePane"> 
 
     <div id="horizontal" style="height: 100%"> 
 
      <div id="two"> 
 
       2 
 
       <input type="text" class="k-textbox" /> 
 
      </div> 
 
      <div id="three"> 
 
       3 
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 
</div>