New to Kendo UI for Angular? Start a free 30-day trial

Customizing FloatingLabel

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-floating-label-scaleNumber11
Description
The transformation scale of the Floating Label.
$kendo-floating-label-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Floating Label.
$kendo-floating-label-max-widthNumber90%90%
Description
The maximum width of the Floating Label.
$kendo-floating-label-font-weightStringvar( --kendo-font-weight-bold, inherit )var(--kendo-font-weight-bold, inherit)
Description
The font weight of the Floating Label.
$kendo-floating-label-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Floating Label.
$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit))
Description
The height of the Floating Label.
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-md-padding-x} + #{$kendo-input-border-width} )calc(var(--kendo-spacing-2, 0.5rem) + 1px)
Description
The horizontal offset of the Floating Label.
$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-md-padding-y} )calc(calc(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit)) + 1px + var(--kendo-spacing-1\.5, 0.375rem))
Description
The vertical offset of the Floating Label.
$kendo-floating-label-focus-scaleNumber11
Description
The transformation scale of the focused Floating Label.
$kendo-floating-label-focus-offset-xNumber00
Description
The horizontal offset of the focused Floating Label.
$kendo-floating-label-focus-offset-yNumber00
Description
The vertical offset of the focused Floating Label.
$kendo-floating-label-transitionList.2s ease-out0.2s ease-out
Description
The transition of the Floating Label.
$kendo-floating-label-bgStringinheritinherit
Description
The background color of the Floating Label.
$kendo-floating-label-textStringinheritinherit
Description
The text color of the Floating Label.
$kendo-floating-label-focus-bgStringinheritinherit
Description
The background color of the focused Floating Label.
$kendo-floating-label-focus-textStringinheritinherit
Description
The text color of the focused Floating Label.
$kendo-floating-label-invalid-textStringvar( --kendo-invalid-text, #{$kendo-invalid-text} )var(--kendo-invalid-text, var(--kendo-color-error-on-surface, #a4262c))
Description
The invalid text color of the Floating Label.

In this article

Not finding the help you need?