Dropdownlist should take size of biggest option

21 posts, 0 answers
  1. Peter
    Peter avatar
    10 posts
    Member since:
    Jul 2012

    Posted 08 Feb 2013 Link to this post

    We have a dropdownlist with an option that is very long. When you open the dropdownlist it displays the option wrapped(broken over more than one line). We want to change this behaviour so the dropdown takes on the size of the biggest option, like a normal HTML select does, with no wrapping, no ellipsis etc.
    In the screenshot, we want the green area to stay the same, but the red area needs to adjust it's size to fit the widest option without wrapping

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 08 Feb 2013 Link to this post

    Hi Peter,

    The width of the DropDownList could be set via the jQuery width method. In the current scenario, you could set it to auto to make it automatically fit the longest item.
    E.g.
    var dropdownlist = $("#dropdown").data("kendoDropDownList");
    dropdownlist.list.width("auto");

    I would suggest you to also add the following CSS style, which will prevent the scroll of the DropDownList (if present) to overlap with the longest item.
    E.g.
    <style>
      .k-list-container .k-list .k-item
      {
          padding-right: 25px;
      }
    </style>

    Please let me know if this works for you.

     

    Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Mike
    Mike avatar
    12 posts
    Member since:
    Apr 2013

    Posted 28 Jun 2013 Link to this post

    Can a min-width be defined for the list?  I don't want the list to be smaller than the input control.

    Thanks,
    Mike
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 02 Jul 2013 Link to this post

    Hello Mike,


    As demonstrated in my previous post you have access to the DOM element for the list and it can be used to set any CSS styles.
    E.g.
    var dropdownlist = $("#dropdown").data("kendoDropDownList");
    dropdownlist.list.css("min-width", "150px");

    I wish you a great day!

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Trent Ballew
    Trent Ballew avatar
    14 posts
    Member since:
    Aug 2009

    Posted 13 Feb 2014 in reply to Mike Link to this post

    You can also use the "-list" css modifier to resize the make the popup expand to the width of the longest item.  This example also specifies the min and max width of the dropdownlist:  You need the !important to prevent Kendo from overriding your setting.

    #dropdown-list {
        width: auto !important;
        min-width: 120px;
        max-width: 210px;
    }
  7. Chuck
    Chuck avatar
    7 posts
    Member since:
    Sep 2014

    Posted 05 Nov 2014 Link to this post

    Is there a way to have the "selected" and "hover" styles extend the entire width of an li, even when extremely long? 

    Example: In the attached .png file of the Telerik Demo for basic dropdownlist usage, the orange select and gray hover styles do not cover the entire list item (altered to extend longer).
  8. Chuck
    Chuck avatar
    7 posts
    Member since:
    Sep 2014

    Posted 05 Nov 2014 in reply to Dimiter Madjarov Link to this post

    Dimiter -

    Unfortunately that doesn't quite work for us for two reasons.  First, it still seems to cut off the box.  (See : http://imgur.com/8Pf1yKT )

    Second, we are wanting to keep the size of the box small while allowing the user to scroll further to the right in order to see the full name.  We don't want the box to actually BE the size of the full name.

    Any other thoughts?
  9. Chuck
    Chuck avatar
    7 posts
    Member since:
    Sep 2014

    Posted 06 Nov 2014 Link to this post

    Another note: we will not know the widest width before hand, it'll need to be dynamic.
  10. Mike
    Mike avatar
    12 posts
    Member since:
    Apr 2013

    Posted 06 Nov 2014 in reply to Chuck Link to this post

    Here's the code that we use.  Just wire it up to the databound event of the DropDownList or call it manually and send in the ddl.

    function setKendoDropDownWidth(e) {
        var ddl = e.sender;

        if (!ddl) ddl = e;
        var popupWidth = ddl.popup.element.outerWidth();
        var boxWidth = ddl.element.width();
        var id = ddl.element[0].id;
        if (popupWidth > boxWidth) {
            ddl.list.css('min-width', boxWidth + 'px');
            // if the list contains more than 6 items then there is a vertical scrollbar and we need to add 20 to the width
            if (ddl.dataSource.data().length > 6) {
                ddl.list.width(ddl.list.width() + 20);
            } else
                ddl.list.width(popupWidth);
        }
      
    }
  11. Chuck
    Chuck avatar
    7 posts
    Member since:
    Sep 2014

    Posted 06 Nov 2014 in reply to Mike Link to this post

    Thanks, Mike -- we'll give this a try.
  12. Chuck
    Chuck avatar
    7 posts
    Member since:
    Sep 2014

    Posted 06 Nov 2014 in reply to Mike Link to this post

    This isn't working; the width of the selected and hover elements aren't being altered when the width is larger than the width of the dropdownlist box (horizontal scrollbar). I've tried some modifications, but so far... nothing successful.
  13. Mike
    Mike avatar
    12 posts
    Member since:
    Apr 2013

    Posted 06 Nov 2014 in reply to Chuck Link to this post

    Did you attach it to DataBound event? Can you post your code?
  14. Chuck
    Chuck avatar
    7 posts
    Member since:
    Sep 2014

    Posted 06 Nov 2014 Link to this post

    Yes, I bound it to the dataBound... but for some reason it looks like your code never gets hit.
  15. Mike
    Mike avatar
    12 posts
    Member since:
    Apr 2013

    Posted 06 Nov 2014 in reply to Chuck Link to this post

    Sounds like the ddl isn't firing the databound event or you are attaching the to the event too late.  Are your ddl values hard coded?  Try calling setKendoDropDownWidth($("#YourDropDownListID").data("kendoDropDownList")) in document ready.
  16. Chuck
    Chuck avatar
    7 posts
    Member since:
    Sep 2014

    Posted 06 Nov 2014 in reply to Mike Link to this post

    Ah, I see. You're basically just setting it to a programmatic equivalent to overflow: auto. We don't want our dropdown box to extend past the width of the input/button. We are find with having a horizontal scrollbar, but the hover and select backgrounds never extend all the way.
  17. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 10 Nov 2014 Link to this post

    Hello guys,


    Here is a sample approach, which demonstrates how to span the selected style to cover the whole available width, without changing the width of the list itself.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  18. Mohsin
    Mohsin avatar
    2 posts
    Member since:
    Jul 2014

    Posted 24 Feb 2015 in reply to Dimiter Madjarov Link to this post

    Try selecting the smallest possible option from the combo box and than use the back space to erase it. Now the width will automatically be shrieked to the smallest. Is there a way to stop this?
  19. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 25 Feb 2015 Link to this post

    Hello Mohsin,

    The current topic is related to the DropDownList. If you are experiencing an issue with the ComboBox, please open a separate forum thread or send us a ticket in our support system.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  20. Brian
    Brian avatar
    3 posts
    Member since:
    Oct 2015

    Posted 22 Dec 2015 Link to this post

    The following code executed in the DataBound event, coupled with setting the list element CSS to width: auto !important (as detailed above) has worked quite well for us:

    function dropDownListAutoWidth(e) {
        var p = e.sender.popup.element;
        var fontSize = $(e.sender.element).css('font-size');
        var $clone = p.clone().css({ visibility: 'hidden', 'font-size': fontSize }).appendTo($('body'));
        var w = $clone.outerWidth();
        $clone.remove();
        e.sender.list.closest('.k-animation-container').width(w);
        $(e.sender.element).closest('.k-widget').width(w);
    }

    This is, of course, insane. Such a simple requirement should be supported out-of-the-box.

  21. Rick
    Rick avatar
    7 posts
    Member since:
    Aug 2011

    Posted 11 Oct in reply to Dimiter Madjarov Link to this post

    Thank you, Dimiter! Your sample approach works perfectly but I wish it was included in Kendo's CSS out of the box.
  22. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 12 Oct Link to this post

    Hello Rick,

    I would suggest to post the idea in our feedback portal, where other users could vote for it and we could review it for implementation.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready