Right align selected chips in multiselect

[Lee]

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?

[Martin]

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

[Lee]

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]

Please check this example where an additional style is applied, and let me know if it does the trick.

[Lee]

closer except the input changes sizes when it is empty and the input floats to the top when a second line exists. 

[Lee]

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]

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]

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]

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.