Dropdownlist should take size of biggest option

[Peter]

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

[Dimiter Madjarov]

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

[Mike]

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

Thanks,
Mike

[Dimiter Madjarov]

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

[Trent Ballew]

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;
}

[Chuck]

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).

[Chuck]

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?

[Chuck]

Another note: we will not know the widest width before hand, it'll need to be dynamic.

[Mike]

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);
    }
  
}

[Chuck]

Thanks, Mike -- we'll give this a try.

[Chuck]

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.

[Mike]

Did you attach it to DataBound event? Can you post your code?

[Chuck]

Yes, I bound it to the dataBound... but for some reason it looks like your code never gets hit.

[Mike]

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.

[Chuck]

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.

[Dimiter Madjarov]

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

 

 

[Mohsin]

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?

[Dimiter Madjarov]

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

 

 

[Brian]

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.

[Rick]

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

[Dimiter Madjarov]

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

 

 

[Levan]

Hello,

In the following example http://jsfiddle.net/fwp6P/3/
Can we give it a style so the overlay and selection style expands till the end of the div like it is for the longest string? Also when you horizontally scroll till the end of the longest option you cannot select shorter ones unless you horizontally scroll back.

[Ianko]

Hello,

I am not sure there is a CSS way to accomplish that. The two options' text below is not so wide so that the items to take the same space as the first one. Plus, with the min-width: 100%, the items are wide as their parent is. Therefore, they will always occupy the same width as the popup width. 

The only solution I can think of is to programmatically traverse the items and set up the width via jQuery based on the longest item in the list.

Regards,
Ianko
Telerik by Progress

[Archana]

Is the same functionality available for KendoDropdownlist Angular 2 + componenets.

Setting width auto, to take the max data element length? and also how to set min width?

Also, when i am setting a default item like "Please select" in the kendo dropdown item list, i am not able to set its font-size according to the my other form elements.

Thanks

Archana

[Ianko]

Hello Archana,

As your question is related to the Angular components, please ask your question in the Kendo UI for Angular forum: https://www.telerik.com/forums/kendo-angular-ui/general-discussions. 

Regards,
Ianko
Progress Telerik