KendoUI Splitter breaks bootstrap styles

Question

I have some HTML I am appending to the KendoUI Splitter container, and it has bootstrap css assigned to it. The styles work fine when the HTML is outside the splitter, but they break when inside the splitter.

How can I solve this?

Here is a simple fiddle that demonstrates the issue: http://jsfiddle.net/codeowl/9Ag3X/17/

Here is the code:

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

Here is the Javascript:

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

Here is the CSS:

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

Using the Chrome developer tools I have found that once rendered the splitter panel div gets assigned the k-widget class. If I edit the div in the dev tool and and remove the k-widget class, the form shows as it should, with the 5px padding in the table cells putting space between the text inputs.

But I have not yet narrowed down exactly what it is in the k-widget class that breaks the bootstrap styles.

Thank you for your time,

Regards,

Scott

Answer 1

Ok I solved the problem!

The k-widget class assigns the following css:

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

These styles break the padding in the table and the bootstrap styles.

I resolved this with the following css on my form:

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

Here is the updated fiddle: http://jsfiddle.net/codeowl/YV8Jx/4/

Hopefully this saves someone else some time.

Regards,

Scott