Bootstrap css messes with k-window-titlebar

6 posts, 0 answers
  1. Casper
    Casper avatar
    9 posts
    Member since:
    Feb 2015

    Posted 27 Apr Link to this post

    I use Bootstrap + Kendo UI as explained here http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap.

    However, when I include the Bootstrap css, it shifts the items in k-window-titlebar slightly lower which doesn't look very good.

    You can seen the effect in this Kendo UI Dojo: http://dojo.telerik.com/apeWu

    Could you please provide a workaround or fix?

  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 29 Apr Link to this post

    Casper,

    I didn't actually notice any differences between kendo + bootstrap and kendo standalone version.

    I've created two dojos based on your original one:

    * http://dojo.telerik.com/@joneff/eQAYe (kendo + bootstrap)
    * http://dojo.telerik.com/@joneff/IBiBO (kendo standalone)

    There are two differences: 1) removing the styles for bootstrap and 2) adding some styles to make body element with no padding.

    Now, there is a difference in the window content, but that's mainly due to how bootstrap gives styles to paragraphs.

    I've tested in FF, Chrome and IE / Edge and they all give the same results.

    Could you please check that my dojos do exhibit the same issues as yours and preferably attach a screenshot to highlight the issue.

    Regards,
    Ivan Zhekov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Casper
    Casper avatar
    9 posts
    Member since:
    Feb 2015

    Posted 29 Apr Link to this post

    Hi Ivan

    Sorry, I should have check before I posted: The issue does not appear in Chrome (Version 50.0.2661.86 (64-bit)), but only in Mozilla Firefox (46.0)

    I attached an image with the two dojos you shared side by side. In the dojo on the left, you will see the text, "Calendar", and the close button is drawn awkwardly close to the bottom.

  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 02 May Link to this post

    It seems that it's an issue related to FireFox on Linux.

    If I had to guess, you are running Ubuntu, correct? Just trying to gather context on which to base my further testing into this issue.

    Regards,
    Ivan Zhekov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Casper
    Casper avatar
    9 posts
    Member since:
    Feb 2015

    Posted 02 May Link to this post

    That is correct.

    I recently upgraded to Ubuntu 16.04 (still Firefox 46.0), but the problem still persists.

  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 02 May Link to this post

    Casper,

    I believe I've narrowed it down to two possible causes:

    1) In your page, you have declared "Arial, Helvetica, sans-serif" as fonts, but then in Bootstrap the fonts are declared as "Helvetica Neue, Helvetica, Arial, sans-serif". As visible from the screenshot, you have different fonts in them, which leads me to believe you have either Helvetica or Helvetica Neue installed.

    2) Starting with FF 46, some limited support for -webkit- prefixed styles is available, such as font-size-adjust. In the past, that's been known to cause issues.

    Locally I was able to get different results, well, not as different as yours, but still different. I believe that's more of a Bootstrap + FF issue and I am not quite sure how it can be mitigated, if at all.

    Regards,
    Ivan Zhekov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready