Expand Backgrounds of Long List Items

Normally, long items in the drop-down list of a Kendo UI ComboBox wrap to multiple lines.

However, if the list item content is non-wrappable—for example, a very long word or a string without spaces—a horizontal scrollbar appears. In this case, the background of the hover and select states does not expand beyond the 100% width of the drop-down list because of the way HTML elements expand in general.

The following example demonstrates how to handle this issue and works for the Kendo UI ComboBox, AutoComplete, DropDownList, and MultiSelect widgets.

Example

<div id="example" role="application">
    <style>
        /* the first part of the ID matches the ID of the widget */
        #combo1-list .k-item
        {
            display: inline-block;
            min-width: 100%;
        }
    </style>

    <p>Expand backgrounds (widths) of long items only, via CSS:
        <select id="combo1">
            <option>foo</option>
            <option>bar</option>
            <option>baz baz baz baz baz baz bazzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</option>
        </select>
    </p>

    <p>Expand backgrounds (widths) of all items, via Javascript:
        <select id="combo2">
            <option>foo</option>
            <option>bar</option>
            <option>baz baz baz baz baz baz bazzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</option>
        </select>
    </p>

    <script>
        $(document).ready(function() {
          $("#combo1").kendoComboBox();

          $("#combo2").kendoComboBox({
            open: function(e){
              setTimeout(function(){
                var list = e.sender.list.find("> div > ul");
                var w = list[0].scrollWidth;
                list.children().width(w);
              });
            }
          });
        });
    </script>
</div>

Expand Backgrounds of Long List Items

Example

See Also

Give article feedback