DropDownList width?

[Kyle]

Hello,
I'm having an issue where my dropdown list width does not seem to be working out very well.

If I have a DropDownList with a smaller entry and a larger entry, I end up getting something like this:
http://imgur.com/biDRhSh (this contains two entrys.   'IS' and 'is any of'

I confirmed with a jsfiddle that I see this as well: http://jsfiddle.net/LSaZ7/

What I would like to do is have the dropdown list itself be able to expand wider than the actual dropdown. Any ideas on how I could get this to work?

[Sean]

UIHelpers.setDropDownListWidth = function (el) {
    var d = el;
    if (d.data("kendoDropDownList") !== undefined) {
        var p = d.data("kendoDropDownList").popup.element;
        var w = p.css("visibility", "hidden").show().outerWidth() + 20;
        p.hide().css("visibility", "visible");
        var kw = d.closest(".k-widget");
        if (kw.width() < w) {
            d.data("kendoDropDownList").list.width(w);
        }
    }
};

I use the code above to set the width of the list.

[Iliana Dyankova]

Hello Kyle,

As another option for changing the DropDownList list's width you may consider using the following code snippet: 

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

For convenience I updated your jsFiddle example.

Kind regards,

Iliana Nikolova
the Telerik team

[Lee]

Odd.. this doesn't work for me.

$("#fixedReport").kendoDropDownList({
                    dataSource: fixedReportItems,
                    dataTextField: "Title",
                    dataValueField: "Id"
   <bit more code in here.. all works normally though>
});

var fixedReportSelectorWidth = $("#fixedReport").data("kendoDropDownList");<br>fixedReportSelectorWidth.list.width(200);

Changing the value (in this case 200) does not have any effect.

[Iliana Dyankova]

Hello Christian,

I am not quite sure what causes the problem in your application. Could you please check if there are any JavaScript errors in the browser console - have in mind that <br> in the provided code snippet is not a valid configuration?

On a side note, here is a simple jsFiddle example which illustrates the desired outcome - is it possible to edit it and reproduce the issue? This way I would be able to advice you further and provide concrete recommendations.

Regards,
Iliana Nikolova
the Telerik team