Customizing Listbox

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 3 )12px
Description
The spacing between the ListBox elements.
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the ListBox buttons.
$kendo-listbox-widthNumber10em10em
Description
The width of the ListBox.
$kendo-listbox-default-heightNumber200px200px
Description
The height of the ListBox.
$kendo-listbox-border-widthNumber1px1px
Description
The width of the border around the ListBox.
$kendo-listbox-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ListBox.
$kendo-listbox-font-sizeNumber$kendo-list-md-font-size14px
Description
The font size of the ListBox.
$kendo-listbox-line-heightNumber$kendo-list-md-line-height1.4285714286
Description
The line height of the ListBox.
$kendo-listbox-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the ListBox.
$kendo-listbox-bgColor$kendo-component-bg#ffffff
Description
The background color of the ListBox.
$kendo-listbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the ListBox.
$kendo-listbox-item-padding-xNumber$kendo-list-md-item-padding-x16px
Description
The inline padding of the ListBox item.
$kendo-listbox-item-padding-yNumber$kendo-list-md-item-padding-y8px
Description
The block padding of the ListBox item.
$kendo-listbox-drop-hint-widthNumber2px2px
Description
The width of the ListBox drop hint.
$kendo-listbox-drop-hint-border-widthNumber2px2px
Description
The width of the border around the ListBox drop hint.

In this article

Not finding the help you need?