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?
5 Answers, 1 is accepted
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
Rank 1
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.
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
Rank 1
That is correct.
I recently upgraded to Ubuntu 16.04 (still Firefox 46.0), but the problem still persists.
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