This is a migrated thread and some comments may be shown as answers.

KendoUI Panels have unexpected affects on their contents

3 Answers 9 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 29 May 2018, 08:00 AM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 31 May 2018, 06:20 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 04 Jun 2018, 08:53 AM

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

0
Dimitar
Telerik team
answered on 04 Jun 2018, 01:11 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Dimitar
Telerik team
Grant
Top achievements
Rank 2
Veteran
Iron
Share this question
or