Clever Geek Handbook

KendoWindow: how to set the height of the title?

KendoWindow has no configuration options to set the height of the window title, and I cannot find a way to do this with CSS. Any ideas?

+3


source to share


2 answers


Selector k-window-titlebar

, but for some attributes you might need important

. Define CSS style as

.k-window-titlebar {
    height: 60px !important;
    color: white !important;
    font-size: 30pt !important;
    background: red !important;
}

Countdown...



$(document).ready(function() {
  var window = $("#window");
  window.kendoWindow({
    width: "450px",
    title: "About Alvar Aalto",
    pinned: true
  });
});
      

        
        
        
      

    
.k-window-titlebar {
  height: 60px !important;
  color: white !important;
  font-size: 30pt !important;
  background: red !important;
}
      

        
        
        
      

    
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>

<div id="window">
  <p>
    Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.
  </p>
</div>
Run codeHide result


+3


source


You can do this in your CSS



.k-window-titlebar {
   height: 50px;
   line-height: 50px; 
   vertical-align: middle;
}
0


source






More articles:


All Articles