MultiSelect text cutting out

Web Themes Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 31 Aug 2022 09:31 by Rami

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?

2 comments

Rami

Posted on: 31 Aug 2022 09:31

Dear Dimo,

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

Regards, Rami

ADMIN

Dimo

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.)

Regards,
Dimo
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/.