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

Bootstrap grid in K-Template (listview)

1 Answer 273 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Rakesh
Top achievements
Rank 1
Rakesh asked on 18 Nov 2015, 09:49 PM

Hi,

I am using Kendo List view with k-template. I want to use Bootstrap grid system inside template. I could not get it working. The content in template doesn't align properly.

I want content to stay within the listview template and behave the grid col-md-* layout. Even I tried changing css.

 

I attached the document. Please use the code in Kendo UI Dojo(i.e http://dojo.telerik.com/IyIYe).

 Appreciate if you can provide solution. 

1 Answer, 1 is accepted

Sort by
0
Accepted
Magdalena
Telerik team
answered on 19 Nov 2015, 11:25 AM
Hello Rakesh,

Bootstrap set the box-sizing CSS property to border-box. Kendo widgets set this value to content-box. If you would like to fix the grid system, you should overwrite this property for the elements inside the Bootstrap grid by the following:
.mainForm * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

We have also updated the Dojo sample.

Please, keep in mind that this could negatively affect to layout of Kendo widgets placed into the Bootstrap grid.

Regards,
Magdalena
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Templates
Asked by
Rakesh
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Share this question
or