Hi,
I'm just new to kendo, so I may did something wrong, when setting up my project. I have a simple file:
When its rendered in Chrome it looks like as you can find attached. This looks kind of something is missing. But when I click the linkes css and js files in Chrome Source view, it all resolves fine.
Do you have a hint for me?
Thanks in advance!
Jan
I'm just new to kendo, so I may did something wrong, when setting up my project. I have a simple file:
01.<%@ page language="java" contentType="text/html; charset=ISO-8859-1"02. pageEncoding="ISO-8859-1"%>03.<%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>04.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">05.<html>06.<head>07.<link href="styles/kendo.common.css" rel="stylesheet" />08.<link href="styles/kendo.default.min.css" rel="stylesheet" />09.<script src="js/jquery.min.js"></script>10.<script src="js/kendo.all.min.js"></script>11. 12. 13.<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">14.<title>Insert title2 here</title>15.</head>16.<body>17. <div id="example" class="k-content">18. <kendo:calendar name="cal1"></kendo:calendar>19. </div>20.</body>21.</html>When its rendered in Chrome it looks like as you can find attached. This looks kind of something is missing. But when I click the linkes css and js files in Chrome Source view, it all resolves fine.
Do you have a hint for me?
Thanks in advance!
Jan
5 Answers, 1 is accepted
0
Hello Jan,
The Calendar looks OK and nothing is missing. In case you are wondering why the font styles are different, compared to our online demos, please note that Kendo UI does not apply any font family or base font size, so they are inherited from the page styles (if such exist), or the browser defaults (Times New Roman 16px) are applied, as in your case.
Regards,
Dimo
Telerik
The Calendar looks OK and nothing is missing. In case you are wondering why the font styles are different, compared to our online demos, please note that Kendo UI does not apply any font family or base font size, so they are inherited from the page styles (if such exist), or the browser defaults (Times New Roman 16px) are applied, as in your case.
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jan
Top achievements
Rank 1
Rank 1
answered on 30 Apr 2014, 08:26 AM
Hi Dimo,
thanks for your quick reply. I understand. Thats why the appearence changes, when I activate Bootstrap, I guess.
I still wonder if the position of the navigation arrows to switch back and forward is correct? Looks way higher, than in the demo?
Thanks in again for your help!
Jan
thanks for your quick reply. I understand. Thats why the appearence changes, when I activate Bootstrap, I guess.
I still wonder if the position of the navigation arrows to switch back and forward is correct? Looks way higher, than in the demo?
Thanks in again for your help!
Jan
0
Hi Jan,
Vertical icon alignment is affected by the DOCTYPE. I notice that you are currently using an unsupported one:
http://docs.telerik.com/kendo-ui/getting-started/technical-requirements#supported-desktop-browsers
We recommend the HTML5 DOCTYPE, which is also the simplest one.
The XHTML 1.0 Transitional DOCTYPE is generally OK, but it can also break vertical icon alignment, which we discovered recently.
Regards,
Dimo
Telerik
Vertical icon alignment is affected by the DOCTYPE. I notice that you are currently using an unsupported one:
http://docs.telerik.com/kendo-ui/getting-started/technical-requirements#supported-desktop-browsers
We recommend the HTML5 DOCTYPE, which is also the simplest one.
<!DOCTYPE html>The XHTML 1.0 Transitional DOCTYPE is generally OK, but it can also break vertical icon alignment, which we discovered recently.
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jan
Top achievements
Rank 1
Rank 1
answered on 30 Apr 2014, 08:57 AM
01.<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>02.<%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>03.<!DOCTYPE html>04.<html>05.<head>06.<link rel="stylesheet" href="styles/kendo.common.min.css" />07.<link rel="stylesheet" href="styles/kendo.default.min.css" />08.<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />09.<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" />10. 11.<script src="js/jquery.min.js"></script>12.<script src="js/kendo.all.min.js"></script>13.<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>14. 15.<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">16.<title>Test</title>17.</head>18.<body>19. <div style="margin-top: 10px; margin-left: 10px;">20. <kendo:calendar name="cal1"></kendo:calendar>21. </div>22.</body>23.</html>Hi Dimo,
thanks a lot! This solved nearly every issue. Stupid me, I used the eclipse template for JSP which generates a non HTML5 Doctype.
Sorry to bother you: What still remains, regardless of having Bootstrap activated or not is this thin 1 pixel white margin right to the header of the table (weekdays).
Do you have a hint for this too?
Thanks
Jan
0
Hello Jan,
The 1px white gap seems to be caused by sub-pixel rendering issues, which can occur randomly. The problem can be avoided by changing the font-size to some other "more suitable" value. If you don't really want to change the font-size, then specify a decimal value, which is very close to the desired one, e.g. 15.8px instead of 16px or something like that. 12px works fine on my side.
In addition, the Bootstrap CSS breaks the calendar cells' text alignment and you to restore it:
Regards,
Dimo
Telerik
The 1px white gap seems to be caused by sub-pixel rendering issues, which can occur randomly. The problem can be avoided by changing the font-size to some other "more suitable" value. If you don't really want to change the font-size, then specify a decimal value, which is very close to the desired one, e.g. 15.8px instead of 16px or something like that. 12px works fine on my side.
In addition, the Bootstrap CSS breaks the calendar cells' text alignment and you to restore it:
.k-calendar th { text-align: right;}Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!