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/

希望这样可以节省别人的一段时间。

问候，

斯科特