Using Bootstrap, Kendo Grid and a custom row template with Bootstrap syntax

[Phil]

I wanted to post this helpful tip:

If you are using Bootstrap and the Kendo Grid with a custom row template that uses Bootstrap functionality inside the row template, e.g.:

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr><td>
    <div class="row">
        <div class="col-md-12">
            [Content]
        </div>
    </div>
    </td></tr>
</script>

You will find the bootstrap layout breaks as Kendo are using content-box, not border-box for all their widgets. A workaround that I found is to use:

.k-widget .row *
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

This ensures the styling of the Kendo grid remains correct, but applies the Bootstrap box sizing to all children of any Bootstrap rows within a Kendo grid.

[Pat]

This was exactly what I needed.

Thanks for the post!