Bug with Kendo Picker Themes

[IT Dept]

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).

 

 

[Stefan]

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

[IT Dept]

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.

[Stefan]

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

[Nikolaos]

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

[Martin]

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