KendoUI Panels have unexpected affects on their contents

4 posts, 1 answers
  1. Grant
    Grant avatar
    118 posts
    Member since:
    Jul 2016

    Posted 29 May 2018 Link to this post

    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

  2.
  3. Answer
    Dimitar
    Admin
    Dimitar avatar
    633 posts

    Posted 31 May 2018 Link to this post

    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.
  5. Grant
    Grant avatar
    118 posts
    Member since:
    Jul 2016

    Posted 04 Jun 2018 in reply to Dimitar Link to this post

    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

  7. Dimitar
    Admin
    Dimitar avatar
    633 posts

    Posted 04 Jun 2018 Link to this post

    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.
Back to Top