Bug with Kendo Picker Themes

6 posts, 0 answers
  1. Eric
    Eric avatar
    48 posts
    Member since:
    Aug 2012

    Posted 05 Dec 2019 Link to this post

    I found a bug with the themes in the Kendo picker components that is breaking the styles of the clear button like so:

    It causes the clear `x` to render on top of the dropdown button rather than spaced to the left.

    The issue is caused by Chrome not liking a css `calc` function where `+ 0` is used. Removing the + 0 fixes is.

     

    This is caused because of this line:

    @progress\kendo-theme-default\scss\_variables.scss:439  - `$picker-icon-offset: calc( #{$picker-select-calc-size} + #{$picker-select-border-width}  + #{$input-icon-offset}) !default;`

    but on this line:

    @progress\kendo-theme-default\scss\_variables.scss:424 - `$picker-select-border-width: 0 !default;`

    You can see $picker-select-border-width is set to 0, which when injected in line 439 adds the +0 which the css calc method dislikes. (there is also an extra space after that factor on line 439).

     

     

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 06 Dec 2019 Link to this post

    Hello, Eric,

    Thank you for all of the details.

    The component on the picture seems like the ComboBox component.

    I tested the component, but on my end, the clear icon was placed correctly:

    https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/

    Is it possible to share in which cases this occurs, so we can reproduce it locally as well, to ensure that when we fix it, we can test it correctly.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Eric
    Eric avatar
    48 posts
    Member since:
    Aug 2012

    Posted 09 Dec 2019 in reply to Stefan Link to this post

    Hi Stefan, that's because in those stackblitz examples the the styles are being rendered as `right: calc(1.4285714286em + 14px)` instead of as `calc( calc( 1.42857em + 8px) + 0 + 6px).`

    Either the build process for the stylesheets, or the source stylesheets themselves are different. It's using a pre-computed "https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" import for styles. Maybe the issue is in the sass-loader or less-loader used by webpack to bundle it, I'll see if I can make a repro.

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 10 Dec 2019 Link to this post

    Hello, Eric,

    I will be expecting the example, so I can inspect the issue locally.

    I also made a local version of the example with the CSS loaded from the package and not from the CDN(it is still a compiled dist version).

    It can be used as a starting point.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Nikolaos
    Nikolaos avatar
    2 posts
    Member since:
    Feb 2019

    Posted 26 Mar 2020 in reply to Stefan Link to this post

    Hello Stefan and Eric,

    I have exactly the same issue with kendo-theme-material on a kendo angular combobox.

    I can not reproduce it on stackblitz but if you find something please share it with me.

    Thanks

  6. Martin
    Admin
    Martin avatar
    276 posts

    Posted 26 Mar 2020 Link to this post

    Hi Nikolaos,

    My name is Martin part of the Kendo Angular team.

    Let me begin by providing some general information on this case.

    Currently, the demonstrated behavior is caused due to using a Kendo SCSS theme. Since Angular 8, the framework uses DartSass in order to compile SCSS. However, the DartSass functionality isn't sufficient to compile our themes completely and thus the generated CSS is missing some minor parts.

    We are aware of that limitation, that why we prepared a guideline showing what needs to be done in addition in order for the SCSS themes to be compiled properly. Please check it out:

    https://github.com/telerik/kendo-themes/wiki/Compiling-themes

    The following articles might be helpful as well:

    https://github.com/telerik/kendo-themes/wiki/Customizing-themes

    https://github.com/telerik/kendo-themes/wiki/Including-themes-in-Angular-projects

    Alternatively, the developer can use the pre-compiled CSS of the themes by loading it directly within the styles array of the angular.json file:

    https://www.telerik.com/kendo-angular-ui-develop/components/styling/#toc-including-themes-by-using-precompiled-css

    I hope this helps.

    Regards,
    Martin
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top