How to make the DropDownList width auto resize

4 posts, 0 answers
  1. Jing
    Jing avatar
    2 posts
    Member since:
    Jul 2012

    Posted 17 Dec 2012 Link to this post

    Hi all

    I am currently trying to find a way to automatically set the width of dropdownlist depending on drop down items

    Thanks

    Jing
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Dec 2012 Link to this post

    Hi Jing,

    By design, the DropDownList dropdown width depends on the DropDownList width, not vice-versa.

    What you can do is check the length of the longest DropDownList item server-side (from the widget's datasource) and set some approximate width to the widget, based on the used font size.

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jing
    Jing avatar
    2 posts
    Member since:
    Jul 2012

    Posted 18 Dec 2012 Link to this post

    Thanks Dimo. Could you provide me some sample code to your solution? I am a bit new to Kendu now.

    Best Regards

    Jing
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Dec 2012 Link to this post

    Hi Jing,

    What I suggested is not related to Kendo UI, so you should be able to do it based on your current knowledge.

    1. You need to retrieve the DataSource you are using and iterate through the items.
    2. Find the item with longest text and count the characters.
    3. Set width to the DropDownList by using

    Html.Kendo().DropDownList()
        .HtmlAttributes(new { style = "width:" + newWidth + "px" })

    where newWidth can be calculated like this:

    [item characters] * [font size] + 25

    where "25" is the space required by side paddings and the open button. You can use a larger number to increase the space between the item text and the open button.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready