9
 var ddlViews = $('#ddlViews').data("kendoDropDownList");
        ddlViews.list.width("auto");

I have added width to be auto but its not working, also the width of the dropdown box gets the max width of the item selected and overflows out of the box. I want the dropdown box to have a fixed width, but the dropdown list items should show contents in single line. As the normal dropdown would work.

3
  • tinypic.com/r/2vt63pc/5 here is the screen where it doesn't work, any ideas would be greatly appreciated.
    – Raza
    Commented Jul 17, 2013 at 6:48
  • ddlViews.list.width("auto"), what do you mean by the .list ? There is not such property on KendoDropdown.
    – Vojtiik
    Commented Jul 17, 2013 at 13:22
  • // get reference to the DropDownList var dropdownlist = $("#size").data("kendoDropDownList"); // set width of the DropDownList dropdownlist.list.width(500); Check this link for more documentation kendoui.com/forums/kendo-ui-web/dropdownlist/…
    – Raza
    Commented Aug 14, 2013 at 8:36

6 Answers 6

16
.k-list-container{
    min-width:126px !important;//give a min width of your choice
    width: auto!important;
}
.k-list
{
    width:auto !important;
}

dropdown

link to js fiddle

1
  • the jsfiddle is missing an opening option tag before stack overflow option.
    – Atishay
    Commented Feb 26, 2014 at 10:12
5

We can set width in 2 ways for Kendo UI combobox list width.

Answer-1 *For static way*

// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);

Answer -2 Dynamic way using css

    .k-list-container
    {
        white-space: nowrap !important;
        width: auto!important;
        overflow-x: hidden !important;
        min-width:243px !important;
    }

    .k-list
    {
        overflow-x: hidden !important;
        /*overflow-style: marquee;*/
        overflow-y: auto !important;
         width:auto !important;
    }

This above css code will work for in dynamic data load.

3
.k-dropdown {
    max-width:10em !important;
}

Add these to your CSS and it works, the width would be the max-width you want to specify so that the dropdown box is of this max-width, whereas the contents/items would be in a single line.

The !important property forcefully adds the style you would like to have. Also it does override the width calculated by kendo.

Thanks for answering.

Hope this helps ! Raza

1

Follow this answer to set width on your Dropdownlist : Kendo dropdown width

.k-dropdown {
     width: 250px;
}
1

kendo has now full support for that, with the autoWidth option

<input id="dropdownlist" style="width: 100px;" />
<script>
$("#dropdownlist").kendoDropDownList({
  autoWidth: true,
  dataSource: {
    data: ["Short item", "An item with really, really long text"]
  }
});
</script>
0

To set dropdown box fixed width(for list only), use

 ddlViews.list.width(200);

To set fixed width for dropdown whether list is active or not, define width in css as

<select id="ddlViews"  style="width:200px;" >
    <option></option>
</select>

I was able to show option content in a single line through css as

ddlViews.list.css("white-space","nowrap");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.