Kendo Datepicker: changing its size or fonts inside

11.5k views Asked by At

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

pic

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:

pic2

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:

pic3

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:

pic4

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.

2

There are 2 answers

0
chiapa On BEST ANSWER

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.

11
OnaBai On

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>