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

AutoComplete - dropdown width sized to content

5 Answers 742 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
cra
Top achievements
Rank 1
cra asked on 07 Dec 2015, 09:16 PM

Hello all,

Before I roll my own solution for this issue I figured it wise to check here first.

I have an autocomplete control that is bound to a view model using the MVVM functionality. I am using a template to display multiple fields of data for each list element in the dropdown like so:

Field 1, Field 2 Field 3 <br />

Field 4

 

But sometimes it wraps because of the length of the content like so:

Field 1, Field 2

Field 3 <br />

Field 4

 

I am looking for a way to prevent the content from wrapping when it reaches the default width of the dropdown.

I assume I can do this via CSS, but as stated I wanted to check here first.

 

Thanks all.

 

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 09 Dec 2015, 11:44 AM
Hi Chris,

To prevent the content from wrapping you could use the following CSS rule: 
.k-animation-container {
   white-space: nowrap;
}


Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
cra
Top achievements
Rank 1
answered on 09 Dec 2015, 02:58 PM

Thank you for your response.

I was able to get the wrapping issue taken care of.

However, the vertical scrollbar is now obscuring part of the value within the list.

0
Iliana Nikolova
Telerik team
answered on 11 Dec 2015, 08:50 AM
Hi Chris,

To avoid the scrollbar you could adjust the DropDownList, as demonstrated in this example.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
cra
Top achievements
Rank 1
answered on 14 Dec 2015, 02:58 PM
[quote]Iliana Nikolova said:Hi Chris,

To avoid the scrollbar you could adjust the DropDownList, as demonstrated in this example.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 

[/quote]

 

That worked perfectly. Thank you very much. I am using the control in conjunction with the MVVM framework (and markup bindings) so I had to first get a reference to the control but it worked great.

 

I have one more issue I am facing that you may be able to help me with. There is an example on how to highlight in the list the value that is being matched. It uses a function that is invoked in the template specification during configuration of the control via JS. However since I am using the attribute bindings to initialize the control with the MVVM framework, I am able to use the function to highlight the value however I am having issues getting the value to match. In the example you simply do this.val() but when using the attribute binding (data-template) to set your item template that does not work.

Thanks for all of your help thus far.

0
Iliana Nikolova
Telerik team
answered on 16 Dec 2015, 09:38 AM
Hi Chris,

I am glad to hear my suggestion helped. I would like to remind you that as a general practice it is accepted to post different questions in separate threads. In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving. As the latest question is not directly related to the initial one in this thread I would like to ask you to open a new conversation for it. Thank you in advance for your understanding and cooperation.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
AutoComplete
Asked by
cra
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
cra
Top achievements
Rank 1
Share this question
or