This is a migrated thread and some comments may be shown as answers.

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

1 Answer 164 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 1
Phil asked on 22 Jan 2014, 12:15 PM
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.

1 Answer, 1 is accepted

Sort by
0
Pat
Top achievements
Rank 1
answered on 21 Feb 2017, 09:11 PM

This was exactly what I needed.

Thanks for the post!

Tags
Grid
Asked by
Phil
Top achievements
Rank 1
Answers by
Pat
Top achievements
Rank 1
Share this question
or