Last Updated: 25 Mar 2022 10:47 by ADMIN
Created on: 23 Mar 2022 08:23
Category: Kendo UI for Angular
Type: Bug Report
Kendo Colorpicker header CSS styling
    .k-coloreditor-header {
        padding: $coloreditor-header-padding-y $coloreditor-header-padding-x 0;

The style rule uses the two variables - with x and y respectively, yet has a hardcoded 0px value as a third parameter.

This causes x to only apply top padding, which is misleading.

1 comment
Posted on: 25 Mar 2022 10:47

Hi Mauro,

We do not have dedicated variables for padding-top, padding-bottom, padding-left and padding-right. We only have dedicated variables for horizontal (*-padding-x) and vertical (*-padding-y) padding. This is a decision that we have made in the very beginning of the Kendo Themes project and we use this approach across all components for consistency.

We are hardcoding a zero pixel value in several places in Kendo Theme. We do that only when we are sure that there should not be any padding added.

However, if the user wants to add some padding at the bottom, they can do it with the following custom CSS code:

.k-coloreditor-header {
	padding-bottom: $coloreditor-header-padding-y;

Let us know in case additional information is needed.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at