Won't Fix
Last Updated: 03 Jun 2020 06:04 by ADMIN
Created on: 27 May 2020 13:03
Category: ComboBox
Type: Bug Report
Combobox clear button misplaced

I'm using the default theme:  "@progress/kendo-theme-default": "4.18.2" with some custom overrides.

The generated CSS has the following incorrect rule (because of the unitless zero, see https://www.w3.org/TR/css3-values/#calc-type-checking ):

.k-combobox .k-dropdown-wrap .k-clear-value {
	calc( calc( 1.2em + 8px) + 0 + 6px)

This rules comes from the following scss:

$picker-icon-offset: calc( #{$picker-select-calc-size} + #{$picker-select-border-width}  + #{$input-icon-offset}) !default; 

The unitless zero comes from this value:

$picker-select-border-width: 0 !default;

As a result, the "X" in a combobox overlaps the value.



1 comment
Posted on: 03 Jun 2020 06:04

Hello Anna,

The sass-based themes rely on postcss, autoprefixer and postcss-calc to properly compile the them. This is used internally, thus the distributed compiled .css files with Kendo UI do not exhibit the described issue.

Taking the above into consideration, I assume that you are compiling a custom version of the themes. If that is indeed the case, then you can follow the guide on correctly compiling the sass-based themes linked below:

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.