AutoComplete - dropdown width sized to content

6 posts, 0 answers
  1. cra
    cra avatar
    16 posts
    Member since:
    Jun 2012

    Posted 07 Dec 2015 Link to this post

    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.

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 09 Dec 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. cra
    cra avatar
    16 posts
    Member since:
    Jun 2012

    Posted 09 Dec 2015 in reply to Iliana Nikolova Link to this post

    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.

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 11 Dec 2015 Link to this post

    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!
     
  6. cra
    cra avatar
    16 posts
    Member since:
    Jun 2012

    Posted 14 Dec 2015 in reply to Iliana Nikolova Link to this post

    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!
     

     

    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.

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 16 Dec 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready