Kendo Datepicker: changing its size or fonts inside

Question

I've got a Kendo Datepicker that I'm displaying inside a Kendo Window and it shows like this:

The Datepicker is somehow bloated, with larger than usual fonts and size. Outside the Kendo window, the datepicker displays fine. Now, I was wondering if I could resize the datepicker, or the fonts in it, assuming downsizing the font would downsize the datepicker too.

I have tried adding this to the CSS:

.k-popup .k-calendar {
   font-size: 10px !important;
}

And the result was odd:

It only worked partially because only the month name was reduced, the numbers remained large...

The main issue is that when opening the datepicker, it overflows outside the kendo window dimensions: I was looking for a solution that would allow me to downsize the datepicker so it would fit.

EDIT

I tried to add the k-calendar class:

@(Html.Kendo().DatePicker()
    .Name("concessionTOD")
    .Start(CalendarView.Month)
    .Value(DateTime.Now)
    .Format("yyyy-MM-dd")
    .Culture("pt-PT")
    .HtmlAttributes(new { @class = "k-calendar" })
)

but the result was this:

you can see in the above image the size of the input and month name are reduced, indeed, but the calendar itself keeps bloated.

EDIT 2

I learned that if the window is defined as an iFrame, the results inside may vary as an iFrame, as a regular webpage, requires a DOCTYPE as well as the html, head and body tags. I added this to the partial view that's inserted in the window and the result was this:

So, the calendar isn't bloated anymore but still overflows the window's height, causing a scroll bar to appear. To access the lower part of the calendar, I must use the scroll. As said before, I want the calendar to overflow outside the window, as shown in OnaBai's answer, without creating any scroll bars.

Also, I found in the documentation that

Refreshes the content of a Window from a remote URL or the initially defined content template. Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.

I'm not sure how to interpret the second sentence but it may help in dealing with the issue.

OnaBai · Answer 1 · 2014-11-27T16:45:51.173

4

Use the following CSS selector / definition:

.k-calendar {
    font-size: 10px;
}

Check the following code snippet.

$("#datepicker").kendoDatePicker();
$("#win").kendoWindow({
  title: "window with datepicker"
});

.k-calendar {
  font-size: 10px;
}

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="win">
  <input id="datepicker" value="10/10/2011"/>
</div>

edited Nov 27 '14 at 16:45

answered Nov 27 '14 at 13:13

OnaBai

40,767
6
96
125

The issue persists: only the month name is downsized, the calendar numbers are still large. I see it works in your example but not on my app – chiapa Nov 27 '14 at 14:29
That means that you overwrite it somewhere. Try posting a code that reproduces it in Jsfiddle or JSBin and share the link – OnaBai Nov 27 '14 at 14:59
I don't know how to do that since my widgets are in Razor. All the JSBin examples of Kendo I saw were in plain Javascript. Anyway, I removed all the `font-size` properties from my CSS and it still doesn't work. The overriding theory makes sense but I think that's not the case. One other thing I noticed: can you see in the images, the calendar icon on the snippet is not vertically aligned, it's glued to the top limit. If the datepicker is outside the Kendo window this doesn't happen, the icon is perfectly centered... maybe this could mean something – chiapa Nov 27 '14 at 15:15
Which browser are you using? Most have an _inspect element_ mode that shows information about the HMTL and CSS in your page. Try opening the calendar, inspect some of the days in the calendar and see where the `font-size` definition is coming from. What happens if you add `style="font-size: 10pt;"` to the calendar HTML input? – OnaBai Nov 27 '14 at 15:51
I've tried IE, FireFox and Chrome with the same result. The inspector tells me that it inherits the body font size of 13px but if I remove that, the whole text of the window becomes larger, way larger than 13px. It's a weird behaviour inside the Kendo Window. I have tried with `10pt` and there's no effect. I'm starting to think that it's a Kendo Window problem, rather than the datepicker's – chiapa Nov 27 '14 at 16:04
I've edited my example in the answer for placing the datepicker inside a window. It works and the CSS reduces the font size. I cannot reproduce your problem :-( – OnaBai Nov 27 '14 at 16:46
Thank you a lot for your effort OnaBai, I can't seem to find the problem. My Kendo Windows are `IFrame` and `Modal` and their content is loaded via MVC controller methods but the issue only persists in my application. There is something strangely wrong and the proof of that is the calendar icon that is not centered right from the start, only inside kendo windows! I have also noticed that, in your answer, the datepicker flows outside the window: that doesn't happen on my application and that's the reason I want to downsize the text, so the calendar won't be clipped! – chiapa Nov 27 '14 at 17:14
Ummm! if you are using IFrame, are you sure that it is actually loading all the required styles? I would say that the IFrame is missing some KendoUI CSS style. – OnaBai Nov 27 '14 at 18:03
Sorry @chiapa, not sure I understand your edit. My example also displays a scrollbar, right? – OnaBai May 08 '15 at 15:51
No OnaBai, my example shows a scrollbar inside the Kendo Window while yours doesn't. Your example in fullscreen doesn't show a scrollbar. I want the datepicker's calendar to overflow the window without any scrollbar, as your example shows – chiapa May 08 '15 at 20:30
OnaBai, I have answered my own question, I finally found out the reason for the unwanted behaviour. Thanks for all your help and effort! – chiapa May 11 '15 at 15:25

score 1 · Accepted Answer · answered May 11 '15 at 15:24

OK, so I solved my issue, the telerik support proved most valuable. They reminded me that it is not possible to have an overflowed iframe.

So, I removed my iFrame setting from the Kendo Window:

@(Html.Kendo().Window()
    .Name("addConcessionWindow")
    .Modal(true)
    //.Iframe(true)
    .Visible(false)
)

and removed the script and style references I had in the html page the filled the window (so they won't be loaded twice).

Bottomline is:

it is not possible to have an overflowed iframe.

Kendo Datepicker: changing its size or fonts inside

EDIT

EDIT 2

2 Answers2