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

Strange looking UI

5 Answers 43 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jan
Top achievements
Rank 1
Jan asked on 29 Apr 2014, 02:43 PM
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

Sort by
0
Dimo
Telerik team
answered on 29 Apr 2014, 03:14 PM
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
 
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
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
0
Dimo
Telerik team
answered on 30 Apr 2014, 08:35 AM
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.

<!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
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
Dimo
Telerik team
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!
 
Tags
General Discussions
Asked by
Jan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jan
Top achievements
Rank 1
Share this question
or