DropDownList - how to set the width?

6 posts, 0 answers
  1. Mark
    Mark avatar
    2 posts
    Member since:
    Aug 2012

    Posted 02 Oct 2012 Link to this post

    There is a .Height property for the DropDownList, but no .Width property.  Why not?  The only way I've found this (see below) - and that took some rooting through other forum postings:

    @(Html.Kendo().DropDownList()
              .Name("companyGroup")
              .DataTextField("Text")
              .DataValueField("Value")
    ... removed for brevity
              .HtmlAttributes(new { style = "width:250px"})
        )

    Could not find ANY information on this in the documentation. It may be there, but it's not obvious. 

    Is there a better way to set width?  Again, seems like this should be a fairly normal property to set.

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    2659 posts
    Member since:
    Sep 2012

    Posted 05 Oct 2012 Link to this post

    Hello Mark,

     
    The height property defines the maximum height if the popup element and not the height of the widget itself. The way you set the width of the widget is just fine, because the Kendo UI DropDownList wrapper renders an input element with the correct attributes and then the Kendo DropDownList is initialized from it.

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  3. AkAlan
    AkAlan avatar
    117 posts
    Member since:
    Jun 2009

    Posted 17 Dec 2013 Link to this post

    Trying to set both Width and Height but when adding Height to the mix, it overrides the width setting.  How can I set both?

  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    2659 posts
    Member since:
    Sep 2012

    Posted 18 Dec 2013 Link to this post

    Hello Alan,

    Here is a simple jsBin demo, which shows how to achieve this. You can achieve the same behavior using the Kendo wrapper for ASP.NET MVC. 

    Regards,
    Georgi Krustev
    Telerik

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  5. AkAlan
    AkAlan avatar
    117 posts
    Member since:
    Jun 2009

    Posted 18 Dec 2013 Link to this post

    Hi Georgi Krustev, the example sets the width of the entire dropdown. I guess what I meant to ask about is how to set the dropdown list width. I have cloned your jsBin here  and provided a working example of how to set the List width different from the Dropdown width. This comes in handy when using a template in the dropdown to show multiple columns in the list but only the selected item in the dropdown.  Is there a better way to achieve this behavior all in one statement? Also there really should be something in the basic documentation about how to achieve this rather common functionality. Thanks.

  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    2659 posts
    Member since:
    Sep 2012

    Posted 19 Dec 2013 Link to this post

    Hello again Alan,

    Thank you for the clarification and for the updated jsBin demo. Currently, this is the only suggested approach, which can be used to define popup width different than its anchor. This is documented here. I will suggest you open a user voice discussion on the subject. Thus we will gather community feedback and will be able to determine how to implement it.

    Regards,
    Georgi Krustev
    Telerik

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Back to Top