3

KendoUI Splitter コンテナに追加する HTML がいくつかあり、それにブートストラップ 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 クラスの内容を正確に絞り込むことはまだできていません。

お時間をいただきありがとうございます。

よろしく、

スコット

4

1 に答える 1