DropdownList Content Width

6 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 29 Jun 2015 Link to this post

    Is there any way to make the drop down portion of a Kendo DropdownList as wide as necessary to accomodate the content? As you can see in the attached image, the text "(ascending)" is being cut off because the dropdown portion is only as wide as the parent. This is a fully responsive app, so the dropdown itself is going to be bigger or smaller, based on the device/browser size, so the solution will need to work for that condition.
  2. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 01 Jul 2015 Link to this post

    Hello Shimmoril,

     

    In this case you could use the list field of the DropDownList and set its width to "auto".

     

    ddl.list.width("auto")

     

    Please refer to the following how-to article - How to automatically adjust the width of a DropDownList

     

    Regards,
    Plamen Lazarov
    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. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 02 Jul 2015 in reply to Plamen Lazarov Link to this post

    While that works nicely for when the dropdowns are small, it looks terrible when they're larger - see the attached image. Basically, if the parent is large enough for the text, they're fine, but if the text is too long for the parent, I'd like to see the dropdown portion grow (or even have a scrollbar, if necessary).
  5. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 06 Jul 2015 Link to this post

    Hello Shimmoril,

    I am not quite sure if I understand correctly what the exact outcome should be, however if the goal is to set "width: auto" to the so called "parent"  you could use the CSS rule below: 
    <style>
      .k-dropdown {
        width: auto;
    }
    </style>       

    Also Kendo DropDownList supports the scrollbar scenario mentioned in your previous response (see an example). However since we are not aware of your current implementation, we cannot say why it is not appearing in the application. Could you please modify the provided demo or send a simple dojo where the issue could be observed - this way we would be able to check what exactly is going wrong and provide concrete recommendations? 

    Regards,
    Plamen Lazarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 06 Jul 2015 in reply to Plamen Lazarov Link to this post

    I've modified the CSS as suggested, and it looks like it may be specific to the iPad/mobile(?) display. I'm attaching two images from my iPad, one of our site, where the text is cut off, and one of the demo, where the display is even worse.

    (Also, FYI, your scrollbar example never actually shows a scrollbar, it just keeps getting longer and longer, based on the text).

  7. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 08 Jul 2015 Link to this post

    Hello Shimmoril,

    My apologies, it seems the link from my previous response is wrong - here is the demo with scrollbar. Basically, if the text is too large and width:auto is not set, the scrollbar should appear automatically.

    As I mentioned, we are not aware of your current implementation and cannot tell why the scrollbar does not appear. Please modify the provided example and demonstrate your exact setup - we will check it right away and do our best to help. Thank you in advance for your cooperation and time.

    Regards,
    Plamen Lazarov
    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