Set kendoDropDownList width

3 Answers 2995 Views
DropDownList
Bruce
Top achievements
Rank 1
Bruce asked on 20 Sep 2011, 09:36 PM
How do I set the width of the kendoDropDownList?

3 Answers, 1 is accepted

Sort by
0
Bruce
Top achievements
Rank 1
answered on 20 Sep 2011, 10:19 PM
Nevermind... figured it out.

dropdownlist = $("#input").data("kendoDropDownList");
dropdownlist.ul.width(400);
com
Top achievements
Rank 1
commented on 21 Nov 2011, 03:41 PM

I have tried the kendoDropDownList but I am not completely convinced of using it. I tried the code:
  dropdownlist = $("#input_combo").data("kendoDropDownList");
    dropdownlist.ul.width(400);

The reason: i would like to have the full width, instead of viewing "..."

In my attach file, you can see what i don't like ... i mean, an incorrect behaviour, because of the combo width.

I hope someone can point me how can I solve this solution!
com
Top achievements
Rank 1
commented on 21 Nov 2011, 04:08 PM

More questions:
When i create the SELECT, i have something like this:

<select name="xx" id="xx" onClick="javascriptfunction()">

When applying the KendoUI, this functionality is lost. How can i achieve the same behaviour after applyinf the Kendo? What jQuery code should i add?

Thank you very much for the help!
   combuilder
0
com
Top achievements
Rank 1
answered on 22 Nov 2011, 11:04 AM
Finally, i got the answer.

I should include style="width:400px" in the <select>
Diljeet
Top achievements
Rank 1
commented on 31 Jul 2013, 05:42 AM

When I add Style="width:150px" only the list width is set so the original width of dropdown is retained, I basically need 3 dropdowns with different width set on same page, how do i do this? 
0
Dimo
Telerik team
answered on 31 Jul 2013, 11:32 AM
Hello,

There are several ways to set width to the Kendo UI DropDownList widget. The simple ones are:

1. Apply an inline width style to the originating DOM element, before the widget is initialized.

http://demos.kendoui.com/web/dropdownlist/remotedatasource.html

2. Apply a cutom CSS class to the originating DOM element, again, before the widget is initialized:


<input id="products" class="myDDL" />

.myDDL
{
    width: 300px;
}

The CSS rule must come after the Kendo UI common stylesheet, or must have a higher specificity.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
VasVas
Top achievements
Rank 1
commented on 28 Apr 2015, 08:07 AM

Dear Dimo,

adding  kendoComboBox.ul.width(400);

enables me to show a the list which is wider then the size of the combo itself.

But the grid created a gray box as shown in com's screen shot, is there a way to remove the backround color or remove this outline

so the Dropdownlist of the combo will look presentable?

 

Yours,

 

Ariel

 

Dimo
Telerik team
commented on 30 Apr 2015, 11:16 AM

Hello Ariel,

Please refer to the documentation:

http://docs.telerik.com/kendo-ui/web/combobox/overview#customizing-the-width-of-the-drop-down-list

Regards,
Dimo
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
Bruce
Top achievements
Rank 1
Answers by
Bruce
Top achievements
Rank 1
com
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or