KendoUI Splitter破壞引導樣式

Question

我有一些HTML我追加到KendoUI Splitter容器，並且它已經分配給它的引導CSS。當HTML位於分離器之外時，樣式可以正常工作，但是當它們位於分離器內部時，它們會中斷。

我該如何解決這個問題？

下面是一個說明問題的一個簡單的小提琴： http://jsfiddle.net/codeowl/9Ag3X/17/

下面是代碼：

<div class="spacer"></div> 

<div id="StandardDiv">  
</div> 

<div class="spacer"></div> 

<div id="splitter" 
    data-role="splitter" 
    data-panes="[ 
     { collapsible: false, size: '30px' }, 
     { collapsible: false } 
    ]"> 
    <div id="LeftPane"></div> 
    <div id="RightPane"></div>  
</div> 


<script id="TestTemplate"> 
    <div class="panel panel-default"> 
     <div class="panel-heading ma-panel-heading">Edit User Details:</div> 
     <div class="panel-body"> 
      <table class="form-uiview-add_edit"> 
       <tr> 
        <td> 
         <label >Username:</label> 
         <input type="text" class="form-control" /> 
        </td> 
        <td> 
         <label >Password:</label> 
         <input type="password" class="form-control" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <label >First Name:</label> 
         <input type="text" class="form-control" /> 
        </td> 
        <td> 
         <label >Last Name:</label> 
         <input type="text" class="form-control" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <label >Email:</label> 
         <input type="text" class="form-control" /> 
        </td> 
        <td> 
         <div class="checkbox"> 
          <label> 
           <input type="checkbox" value="1" /> 
           Account is Active 
          </label> 
         </div> 
        </td> 
       </tr> 
      </table> 
      <div class="pull-right"> 
       <button class="btn btn-default" > 
        Cancel 
       </button> 
       <button class="btn btn-default" > 
        Save 
       </button> 
      </div> 
     </div> 
    </div> 
</script> 

這裏是JavaScript：

$(document).ready(function() { 
    var eTestTemplate = $('#TestTemplate'); 
    $('#StandardDiv').append(eTestTemplate.html()); 
    kendo.bind($('#splitter'), {}); 
    $('#RightPane').append(eTestTemplate.html()); 
}); 

這裏是CSS：

table.form-uiview-add_edit { 
    width:100%; 
} 
.form-uiview-add_edit td { 
    padding:5px; 
} 
.spacer { 
    height:20px; 
} 

使用Chrome開發人員工具我發現一旦呈現分隔符面板div就會分配k-widget類。如果我在開發工具中編輯div並刪除k-widget類，則表單應該顯示，表格單元格中的5px填充將在文本輸入之間放置空格。

但是我還沒有精確地確定它在打破引導樣式的k-widget類中的作用。

謝謝您的時間，

問候，

斯科特

Answer 1

好吧，我解決了這個問題！

第k部件類分配下列的CSS：

.k-widget, .k-widget * { 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
} 

這些樣式打破填充在表中和自舉樣式。

我解決了這個與我的表格下面的CSS：

.form-uiview-add_edit * { 
    -moz-box-sizing: border-box !important; 
    -webkit-box-sizing: border-box !important; 
    box-sizing: border-box !important; 
} 

這裏是更新的小提琴： http://jsfiddle.net/codeowl/YV8Jx/4/

希望這樣可以節省別人的一段時間。

問候，

斯科特