Right align selected chips in multiselect

1 Answer 382 Views
MultiSelect
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 09 Mar 2023, 10:27 PM
I have a requirement to align the selected chips to the right of a kendo multi select's k-input-values block. The issue I have is that there is a hidden input field in the last position. I attempted to remedy this by adding flex-direction: row-reverse to the k-chip-list class, however that makes all the selected items appear in reverse order which the client doesn't like. Is there a way to right align the chips without changing their order?

1 Answer, 1 is accepted

Sort by
-1
Martin
Telerik team
answered on 14 Mar 2023, 02:05 PM

Hello, Lee,

You can add the style below:

.k-multiselect .k-chip { order: 2 }

Here is a small example for reference.

Let me know how that works for you.

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

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 14 Mar 2023, 02:14 PM

The problems with this solution are that the imput ends up in the upper left when there is more than one row of chips and the second row of chips is left aligned. 
Martin
Telerik team
commented on 17 Mar 2023, 11:42 AM

Please check this example where an additional style is applied, and let me know if it does the trick.
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 17 Mar 2023, 12:10 PM

closer except the input changes sizes when it is empty and the input floats to the top when a second line exists. 
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 17 Mar 2023, 01:45 PM | edited

I originally thought the fix would be to wrap the chips in their own span but that keeps a blank space where the input is on all rows so I'm not sure. 
Martin
Telerik team
commented on 22 Mar 2023, 09:24 AM

Regarding the input size, you can add a width style to the select element from which the MultiSelect is initialized. I am not sure I understand the second part about the floating input so please provide some further information about that and I will happily get back to you.
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 22 Mar 2023, 11:36 AM

Normally, when the user types in the multiselect it looks like the text is just over the bottom border of the multiselect, however when there are multiple rows of chips going from right to left, the text appears to float way above the line. 
Martin
Telerik team
commented on 27 Mar 2023, 10:50 AM

The behaviour is a result of the customization of the selected tags' positions. Applying further custom styles to reposition the k-inner-input element as desired may further result in additional issues.
Tags
MultiSelect
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Answers by
Martin
Telerik team
Share this question
or