Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 18 Apr 2022 07:54 by ADMIN
Beto
Created on: 11 Apr 2022 09:34
Category: MultiSelect
Type: Bug Report
0
MultiSelect: items with longer text look broken in less theme

Hi Kendo Team,

After updating to version 2022.1.301 we noticed that the multiselect fields would look broken in some situations.

If the text of a selected item is longer than the line, the text of the new 'chip' will break into a new line.
The chip itself though keeps its fixed height of 24px resulting in an unreadable entry. (see attached image).
This only seems to be an issue in less themes.

We managed to reproduce this behavior in a dojo: https://dojo.telerik.com/ERaQegEc

You can see that in the second field we managed to fix this by modifying the styles of k-chip:

.k-chip {
    line-height: 17px;
    min-height: 24px;
    height: auto;
}


Thanks,

Markus

Attached Files:
1 comment
ADMIN
Neli
Posted on: 18 Apr 2022 07:54

Hi Beto,

Thank you for reporting the issue.

I tested the provided example with the latest Kendo version 2022 R1 SP2 and with it when an item with a long text is selected in the MultiSelect it appears with an ellipsis - Dojo example. If you need to wrap the text when using the latest version you could use  white-space: break-spaces; as in the example below:

<style>
        .k-chip{
          height: auto;
        }
        .k-chip-label{
          white-space: break-spaces;
        }
 </style>

If you are using the previosu Kendo version - 2022.1.301, then only setting the height to auto to the k-chip element should resolve the issue:

<style>
        .k-chip{
          height: auto;
        }
</style>

Here you will find the modified Dojo example. 

I remain at your disposal for any additional questions on the matter.

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

Create an account Log In
View
Type
Status
Category