Set kendoDropDownList width

9 posts, 0 answers
  1. Bruce
    Bruce avatar
    5 posts
    Member since:
    Sep 2011

    Posted 20 Sep 2011 Link to this post

    How do I set the width of the kendoDropDownList?
  2. Bruce
    Bruce avatar
    5 posts
    Member since:
    Sep 2011

    Posted 20 Sep 2011 Link to this post

    Nevermind... figured it out.

    dropdownlist = $("#input").data("kendoDropDownList");
    dropdownlist.ul.width(400);
  3. Kendo UI is VS 2017 Ready
  4. com
    com avatar
    7 posts
    Member since:
    Oct 2011

    Posted 21 Nov 2011 Link to this post

    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!
  5. com
    com avatar
    7 posts
    Member since:
    Oct 2011

    Posted 21 Nov 2011 Link to this post

    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
  6. com
    com avatar
    7 posts
    Member since:
    Oct 2011

    Posted 22 Nov 2011 Link to this post

    Finally, i got the answer.

    I should include style="width:400px" in the <select>
  7. Diljeet
    Diljeet avatar
    8 posts
    Member since:
    Jul 2013

    Posted 31 Jul 2013 Link to this post

    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? 
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 31 Jul 2013 Link to this post

    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!
  9. VasVas
    VasVas avatar
    31 posts
    Member since:
    Nov 2012

    Posted 28 Apr 2015 in reply to Dimo Link to this post

    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

     

  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 30 Apr 2015 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready