Bootstrap 3 compatibility

4 posts, 1 answers
  1. Gilberto
    Gilberto avatar
    7 posts
    Member since:
    May 2009

    Posted 15 Sep 2014 Link to this post

    I have some layout issues using kendoui an bootstrap 3, i am using bootstrap theme but my generated MVC views are as this picture.

     https://dl.dropboxusercontent.com/u/43265433/Captura%20de%20tela%202014-09-16%2000.19.26.png

    How can i have the compatibility.

    Thanks
  2. Gilberto
    Gilberto avatar
    7 posts
    Member since:
    May 2009

    Posted 16 Sep 2014 in reply to Gilberto Link to this post

    I found this link http://demos.telerik.com/kendo-ui/bootstrap/ but i did not get the point.

    Thanks in advance
  3. Answer
    Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 17 Sep 2014 Link to this post

    Hi Gilberto,

    The observed issue can be observed if you apply some Bootstrap (or custom) CSS classes to elements, from which Kendo UI widgets are created. As a result, the Bootstrap (or custom) CSS code breaks the layout of the Kendo UI widgets. In this particular case, I suspect you have set some form-related classes, which apply padding. Please include additional CSS rules, which resets the padding to zero for the following classes.

    k-dropdown
    k-datepicker
    k-datetimepicker
    k-timepicker
    k-numerictextbox
    k-combobox

    Be aware of the concept of CSS specificity in the process.

    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Gilberto
    Gilberto avatar
    7 posts
    Member since:
    May 2009

    Posted 17 Sep 2014 in reply to Dimo Link to this post

    Thank you Dimo,

    I was a pretty standard template, but your solution solve the issue.

    Thanks again
Back to Top