KendoUI Panels have unexpected affects on their contents

[Grant]

Morning, 

As my title suggests I've surrounded a few elements on my page with a KendoUI Panel (k-block), but the panels is affecting the contents. Heres a Dojo showing what I mean, http://dojo.telerik.com/uHiHixiV.

My questions are;
1) Why are the elements enlarged slightly, namely the widgets?
2) Why are the kendoUI widgets underlined?
3) Why does the Time widget suddenly stretch to the length of the panel?

Any advice would be appreciated.

Thanks and kind regards, 
Grant

[Dimitar]

Hello Grant,

All of the mentioned issues are caused by the panel styling. More specifically, the issues are related to the k-header class which is applied to each Kendo UI Widget wrapper. 

In order to eliminate the observed styling issues, just wrapp the contents of the panel inside a block container (<div>, <form>, etc.):

<div class="k-block">
  <div class="k-header"> My Form </div>
  <form>
    <input data-role="timepicker" style="width: 250px" />
  </form>
</div>

Here is an updated Dojo example.

Regards,
Dimitar
Progress Telerik

[Grant]

Hi Dimitar, 

Thanks for pointing this out. I have since updated my code, and it works great.

Perhaps it would be best then to update the header examples for panels (https://demos.telerik.com/kendo-ui/styling/panels) to as this is where I got the original code from.

Thanks again,
Grant

[Dimitar]

Hello Grant,

In general, the Kendo UI Themes expose the .k-card class, which is intended to replace the .k-block styling in a future release. Of course, when this happens, the .k-block class will still be available for use (backwards compatibility), the current demo for Panels will be updated, and a documentation resource that describes different use cases for the cards (.k-card) will be created.

With the .k-card class, the chosen theme paddings and styling will also be applied to the container:

  <div class="k-card">
    <div class="k-card-header">
      <h1>Header</h1>
    </div>
    <div class="k-card-body">
      <label>[Day]</label>
      <input class="k-textbox" readonly style="cursor: pointer" >
      <hr class="k-hr" />
      <label>[Assignee]</label>
      <select data-role="combobox" style="width: 250px"></select>
    </div>
    <hr class="k-hr" />
    <div class="k-card-body">
      <label>[Time]</label>
      <input data-role="timepicker" />
    </div>
     <div class="k-card-actions">
       <span class="k-button k-flat k-primary">Action 1</span>
       <span class="k-button k-flat k-primary">Action 2</span>
    </div>
  </div>

  <script>
  var model = kendo.observable();

 kendo.bind($("html",), model);
  </script>

Also, you will notice that there are different predefined classes that could be used - .k-card-header, .k-card-body, .k-card-actions, .k-hr and more. In addition to this, different types of cards could be set with the .k-state-info, .k-state-error, .k-state-success and .k-state-primary classes:

<div class="k-card k-state-info"></div>

Check out the following Dojo example where the usage of the above described classes is demonstrated.

Regards,
Dimitar
Progress Telerik