Last Updated: 31 Aug 2022 09:31 by Rami
Created on: 26 Aug 2022 04:53
Type: Bug Report
MultiSelect text cutting out

In some cases the text for the selected items does not display properly. Some letters, for example g, get their bottom cut off. This behaviour can be observed on for.ex. the Telerik page https://docs.telerik.com/blazor-ui/components/multiselect/overview The picture below was taken on the latest Edge browser, 1080p screen, 100% zoom level. Funnily enough, changing the zoom level either way makes the text fit in the selected items.

How can I increase the space for the text in the selected items so it's less likely to be cut off?

Posted on: 31 Aug 2022 09:31

Dear Dimo,


thank you for the workaround, it seems to fix the issue.


Regards, Rami

Posted on: 30 Aug 2022 11:03

Hello Rami,

I am converting this forum thread to a public bug report in the Themes portal. Here is also the existing GitHub issue.

In the meantime, the workaround is to reduce the selected item's (a.k.a. chip) padding, and increase its line-height. For example:

    .k-multiselect .k-chip-content {
        margin: -.4em;
        padding: .4em;
    .k-multiselect .k-chip-md {
        line-height: 1.2;

(The default values are .5 and 1.)

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 https://learn.telerik.com/.