KendoUI 스플리터가 부트 스트랩 스타일을 깨뜨림

Question

일부 HTML이 있습니다. KendoUI 스플리터 컨테이너에 추가 중이며 부트 스트랩 CSS가 할당되어 있습니다. 스타일은 HTML이 스플리터 외부에있을 때 잘 동작하지만 스플리터 내부에서는 HTML이 중단됩니다.

어떻게 해결할 수 있습니까? CSS를 여기

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

됩니다 :

여기

<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> 

는 자바 스크립트입니다 : 여기 http://jsfiddle.net/codeowl/9Ag3X/17/

코드입니다 : 여기

이 문제를 보여줍니다 간단한 바이올린은

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

크롬 개발자 도구를 사용하면 렌더링 된 스프릿터 패널 div에 k- 위젯 클래스가 할당되었음을 발견했습니다. dev 도구에서 div를 편집하고 k- 위젯 클래스를 제거하면 양식이 텍스트 입력 사이에 공백을 넣는 표 셀의 5 픽셀 패딩으로 표시됩니다.

아직 부트 스트랩 스타일을 깨뜨리는 k- 위젯 클래스에 무엇이 있는지 정확히 파악하지 못했습니다.

, 당신의 시간을

감사합니다,

스콧 감사

Answer 1

나는이 문제를 해결 좋아!

K 용 위젯 클래스는 다음과 같은 CSS를 할당합니다

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

이러한 스타일은 테이블과 부트 스트랩 스타일의 패딩을 휴식.

나는 내 양식에 다음과 같은 CSS로이 문제를 해결 : http://jsfiddle.net/codeowl/YV8Jx/4/

잘하면 시간이 좀 다른 사람을 저장합니다

여기

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

업데이트 된 바이올린입니다.

감사합니다,

스콧