This is a migrated thread and some comments may be shown as answers.

Strange looking UI

5 Answers 96 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Jan asked on 29 Apr 2014, 02:43 PM

image-1.png

Hi,

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

answered on 30 Apr 2014, 08:57 AM

calendar2.png

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

answered on 30 Apr 2014, 10:09 AM

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:

.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!