title: Kendo Datepicker: changing its size or fonts inside
body: <p>I've got a Kendo Datepicker that I'm displaying inside a Kendo Window and it shows like this:</p>
  
  <p><img src="https://i.stack.imgur.com/iIboA.png" alt="pic"></p>
  
  <p>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.</p>
  
  <p>I have tried adding this to the CSS:</p>
  
  <pre><code>.k-popup .k-calendar {
     font-size: 10px !important;
  }
  </code></pre>
  
  <p>And the result was odd:</p>
  
  <p><img src="https://i.stack.imgur.com/1XGGR.png" alt="pic2"></p>
  
  <p>It only worked partially because only the month name was reduced, the numbers remained large...</p>
  
  <p>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.</p>
  
  <h2>EDIT</h2>
  
  <p>I tried to add the <code>k-calendar</code> class:</p>
  
  <pre><code>@(Html.Kendo().DatePicker()
      .Name("concessionTOD")
      .Start(CalendarView.Month)
      .Value(DateTime.Now)
      .Format("yyyy-MM-dd")
      .Culture("pt-PT")
      .HtmlAttributes(new { @class = "k-calendar" })
  )
  </code></pre>
  
  <p>but the result was this:</p>
  
  <p><img src="https://i.stack.imgur.com/FWXiD.png" alt="pic3"></p>
  
  <p>you can see in the above image the size of the input and month name are reduced, indeed, but the calendar itself keeps bloated.</p>
  
  <h2>EDIT 2</h2>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/EPTBk.png" alt="pic4"></p>
  
  <p>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.</p>
  
  <p>Also, I found in the <a href="http://docs.telerik.com/kendo-ui/api/javascript/ui/window#methods-refresh" rel="nofollow noreferrer">documentation</a> that</p>
  
  <p><code>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.</code></p>
  
  <p>I'm not sure how to interpret the second sentence but it may help in dealing with the issue.</p>