AutoComplete - dropdown width sized to content

[cra]

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.

 

[Iliana Dyankova]

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

 

 

[cra]

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.

[Iliana Dyankova]

Hi Chris,

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

Regards,
Iliana Nikolova
Telerik

 

 

[cra]

[quote]Iliana Nikolova said:Hi Chris,

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

Regards,
Iliana Nikolova
Telerik

 

 

[/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.

[Iliana Dyankova]

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