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

DropdownList Content Width

5 Answers 567 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Ashleigh L
Top achievements
Rank 1
Ashleigh L asked on 29 Jun 2015, 05:47 PM
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.

5 Answers, 1 is accepted

Sort by
0
Plamen Lazarov
Telerik team
answered on 01 Jul 2015, 01:34 PM

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!
 
0
Ashleigh L
Top achievements
Rank 1
answered on 02 Jul 2015, 03:07 PM
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).
0
Plamen Lazarov
Telerik team
answered on 06 Jul 2015, 12:03 PM

Hello ,

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 "parent"  you could use the CSS rule below: 
<style>
  .k-dropdown {
    width: auto;
}
</style>       

Kendo DropDownList supports the scrollbar scenario mentioned in your previous response (see an example). 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!
 
0
Ashleigh L
Top achievements
Rank 1
answered on 06 Jul 2015, 03:07 PM

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).

0
Plamen Lazarov
Telerik team
answered on 08 Jul 2015, 09:03 AM

apologies, it seems the link from my previous response is wrong - here is the demo with . Basically, if the text is too large and 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!
 
Tags
DropDownList
Asked by
Ashleigh L
Top achievements
Rank 1
Answers by
Plamen Lazarov
Telerik team
Ashleigh L
Top achievements
Rank 1
Share this question
or