This is a migrated thread and some comments may be shown as answers.

How to remove unused blank line?

2 Answers 88 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Gerry
Top achievements
Rank 1
Veteran
Gerry asked on 06 Jun 2020, 10:14 PM

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.

2 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 10 Jun 2020, 05:23 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Umutcan
Top achievements
Rank 1
Iron
answered on 19 Nov 2021, 10:29 AM | edited on 19 Nov 2021, 10:29 AM
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
Telerik team
commented on 23 Nov 2021, 10:11 AM

Could you please try setting height as well to see if that would resolve the problem? Here is the modified example.
Umutcan
Top achievements
Rank 1
Iron
commented on 23 Nov 2021, 10:27 AM

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
Telerik team
commented on 25 Nov 2021, 07:50 AM

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. 
Tags
MultiSelect
Asked by
Gerry
Top achievements
Rank 1
Veteran
Answers by
Petar
Telerik team
Umutcan
Top achievements
Rank 1
Iron
Share this question
or