How to remove unused blank line?

[Gerry]

Go here: https://demos.telerik.com/kendo-ui/multiselect/index

and select Anne King, Andrew Fuller and Nancy Leverling.

MultiSelect now uses two lines and the second line is blank, even after the widget loses focus.

How can I get rid of this extra blank line?

My page has lots of stuff on it, and the extra line causes most of the page to shift down.

[Petar]

Hi Gerry,

This new line is automatically created by the component, based on its width. For example, this Dojo is the same as the one from the linked demo. If you select the same items(Anne King, Andrew Fuller, and Nancy Leverling) you will see that a new line will not be created because the MultiSelect's width is wider. 

What I can suggest in the current situation is using the TagMode of the MultiSelect. Here is also a demo that uses this configuration. You may also find useful this Change Multiselect Tag Mode Based on the Number of Selected Items example. The approach from the example can be modified based on the widths of the MultiSelects used in your application. You can enter in TagMode when 1, 2, 3, etc.  items are selected. 

I hope the above will help you resolve the issue in the application you are working on.

Regards,
Petar
Progress Telerik

[Umutcan]

Hi,

I am trying to add the multiselect tool to my toolbar that I use for data filtering. Since there are other filters in the toolbar, my area is limited so I tried to use TagMode as you suggested. But since the area is limited, this blank line problem occurs again, which messes up the toolbar.

See the dojo: https://dojo.telerik.com/URInAhEw

Is there a way to remove this blank line?

Thank you in advance.

[Martin]

Could you please try setting height as well to see if that would resolve the problem? Here is the modified example.

[Umutcan]

That seems to be a good solution, thank you. I also added this to solve the problem if anyone has this problem:

.k-multiselect .k-input {
        display: none;
    }

This styling appears to be a solution as well. Here is the modified example.

[Neli]

Thank you for sharing the solution that resolved the issue at your side. I am sure it will be helfpul to the other users in the community. 

[Lee]

The problem here seems to be that the search is disabled. Is there a way to get rid of the extra line while still allowing search?

[Neli]

Hi Lee, 

Linked here you will find a Dojo example where the filter is enabled for the MultiSelect. As you will see the data in the widget can be filtered when clicking next to the tag item.

Let me know in case you have additional questions.

Regards,

Neli