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.

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

See Also

• ComboBox JavaScript API Reference
• How to Bypass Boundary Detection
• How to Configure Deferred Value Binding
• How to Expand ComboBox Located in Bootstrap Layout
• How to Implement Cascading with Local Data
• How to Make Visible Input Readonly
• How to Open ComboBox When onFocus is Triggered
• How to Prevent Adding Custom Values
• How to Select Items on Tab
• How to Underline Matched Search

For more runnable examples on the Kendo UI ComboBox, check its how-to articles.