Width
The Telerik and Kendo UI Width Utilities are CSS utility classes that enable you to control the width of an element.
| Utility Class | CSS Property |
|---|---|
.k-max-w-fit | max-width: fit-content; |
.k-w-0 | width: 0; |
.k-w-1px | width: 1px; |
.k-w-1 | width: 0.25rem; |
.k-w-full | width: 100%; |
.k-w-screen | width: 100vw; |
.k-w-min | width: min-content; |
.k-w-max | width: max-content; |
.k-w-fit | width: fit-content; |
.k-min-w-0 | min-width: 0; |
.k-min-w-1px | min-width: 1px; |
.k-min-w-1 | min-width: 0.25rem; |
.k-min-w-full | min-width: 100%; |
.k-min-w-screen | min-width: 100vw; |
.k-min-w-min | min-width: min-content; |
.k-min-w-max | min-width: max-content; |
.k-min-w-fit | min-width: fit-content; |
.k-max-w-0 | max-width: 0; |
.k-max-w-1px | max-width: 1px; |
.k-max-w-1 | max-width: 0.25rem; |
.k-max-w-full | max-width: 100%; |
.k-max-w-screen | max-width: 100vh; |
.k-max-w-min | max-width: min-content; |
.k-max-w-max | max-width: max-content; |
Fixed
Use the k-w-{value} utility to set a fixed width to an element.
Full
Use the k-w-full utility to make the element expand to 100% of its parent's width.
Screen
Use the k-w-screen utility to make the element expand to 100% of the viewport width.
Minimum
Use the k-w-min-{width} utility to set a minimum width to an element.
Maximum
Use the k-w-max-{width} utility to set a maximum width to an element.
