Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Won't Fix
Last Updated: 31 Jul 2020 10:32 by Anna
Anna
Created on: 27 May 2020 13:03
Category: ComboBox
Type: Bug Report
0
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.

 

 

4 comments
Anna
Posted on: 31 Jul 2020 10:32
Thank you, I can confirm version @progress/kendo-theme-default@4.21.0-dev.4bc672f4 solves the problem.
ADMIN
Dimitar
Posted on: 31 Jul 2020 05:49

Hello Anna,

This issue should be resolved with the following PR that converts the "0"s to "0px":

Taking the above into consideration, please keep your current workflow with postcss-calc and try compiling with the dev version of the themes to verify that the issue is successfully resolved.

Regards,
Dimitar
Progress Telerik

Anna
Posted on: 30 Jul 2020 13:36

I added postcss, postcss-calc and autoprefixer to my workflow (webpack based), but the problem persists.

Per https://github.com/postcss/postcss-calc :

When multiple units are mixed together in the same expression, the calc() statement is left as is, to fallback to the W3C calc() implementation.

ADMIN
Dimitar
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:

Regards,
Dimitar
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.
Create an account Log In
View
Type
Status
Category