Applying the bootstrap theme to my grid breaks the styling in template

2 posts, 0 answers
  1. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 28 Nov 2013 Link to this post


    I have a grid which is displaying a custom styled template looking like this with kendo default theme installed (See "fleetlist-kendo-default.PNG")
    At this point the following is installed:
    <link rel="stylesheet" href="@Url.Content("~/Content/Kendo/kendo.common.min.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/Kendo/kendo.default.min.css")">
    However, when I change the theme to Bootstrap so that it can match the rest of my Bootstrap-themed application (Bootstrap 3.x) the template and its styling seems to get overriden (See "fleetlist-kendo-bootstrap.PNG")
    At this point the following is installed:
    <link rel="stylesheet" href="@Url.Content("~/Content/Kendo/kendo.common-bootstrap.min.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/Kendo/kendo.bootstrap.min.css")"/>
    On the other hand, if I apply the flat theme, it works again.
    What can I do? :)

  2. Dimo
    Dimo avatar
    8443 posts

    Posted 29 Nov 2013 Link to this post

    Hi Nicklas,

    The Kendo UI Grid cells normally have vertical borders. The fact that they are missing in your case suggests the existence of some deliberate custom CSS styling or a conflict with non-Kendo UI CSS code.

    I cannot reproduce the described problem locally, based on the provided information.

    Please review the Grid cells with a browser DOM inspector and check what border styles are applied when the Default and Bootstrap themes are registered. This information should provide enough guidance what CSS code needs to be changed or added in order to achieve the desired appearance.

    Let me know if you need further advice. In that case, please provide a runnable demo or a live URL.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top