MultiSelect setting a scrolling data items container

[David]

Hi

I wanted to know the best way to make the selected data item area scrollable inside the kendo multiselect component

I have a sample of a kendo-multiselect with lots of items selected.
I want to limit the size of the selected data items container, so i used a style of  {max-height: 185px; overflow-y: scroll }

Here is my sample:

https://stackblitz.com/edit/angular-cecudd-tjndfp

When I try and put my cursor in the kendo searchbar input element, the available data items popup covers the input element

There has to be a better way to do this, but i could not find any height property on kendo-multiselect

Thanks 

[Martin]

Hi David,

Thanks for the provided Stackblitz example.

Indeed, there is no built-in option to set the height of the tags area. However, it can be achieved by using custom CSS code. The used one in the provided example is correct, but incorrect selector is used. That is why when the popup is shown it covers the selected tags. Use the following selector with the same CSS properties to achieve the desired behavior:

.k-multiselect-wrap {
     max-height: 80px;
     overflow-y: scroll
}

Here is an updated example:

https://stackblitz.com/edit/angular-cecudd-tmkzdm

A common pitfall is to forget to set Angular's ViewEncapsulation to None as otherwise the custom styles will not be applied, unless they are provided at a global level.

I hope this helps. Let me know if any further assistance is required.

Regards,
Martin
Progress Telerik

[David]

Thank you very much Martin, it's exactly what we need !!