So I'm creating an autoplete search field using selectize.js. It works fantastically, unless I scale the dropdown to a small mobile screen. Any text mildly long causes it to overflow to the next line and stretch the dropdown element farther to the right that it should. In addition to the textbox growing, the icon next to the textbox grows with it.

Here is a jsfiddle demonstrating the problem. If you drag the screen so that the 'Result' section is very small, you can see the overflow. On my website, it not only overflows but also stretches the box to the right.

One would think that the ideal property to work with would be 'overflow', making it hidden..but this doesn't seem to work.

Is there any way to fix this?

jsfiddle: /

HTML:

<select id = "searchTextbox">
    <option value = "aaaa"> bbbbbbbbbbbbbbbb </option>
    <option value = "cccc"> dddd </option> 
</select>

Javascript:

var $select = $('#searchTextbox').selectize({
              maxItems: 1,
              maxOptions: 5,
              searchField: ['text', 'value'],
              openOnFocus: false,
              highlight: false,
              scrollDuration: 300,
              create: false
          });

So I'm creating an autoplete search field using selectize.js. It works fantastically, unless I scale the dropdown to a small mobile screen. Any text mildly long causes it to overflow to the next line and stretch the dropdown element farther to the right that it should. In addition to the textbox growing, the icon next to the textbox grows with it.

Here is a jsfiddle demonstrating the problem. If you drag the screen so that the 'Result' section is very small, you can see the overflow. On my website, it not only overflows but also stretches the box to the right.

One would think that the ideal property to work with would be 'overflow', making it hidden..but this doesn't seem to work.

Is there any way to fix this?

jsfiddle: http://jsfiddle/Eq6cJ/

HTML:

<select id = "searchTextbox">
    <option value = "aaaa"> bbbbbbbbbbbbbbbb </option>
    <option value = "cccc"> dddd </option> 
</select>

Javascript:

var $select = $('#searchTextbox').selectize({
              maxItems: 1,
              maxOptions: 5,
              searchField: ['text', 'value'],
              openOnFocus: false,
              highlight: false,
              scrollDuration: 300,
              create: false
          });

• javascript
• html
• css
• jquery-plugins
• selectize.js

2 Answers 2

.selectize-input {
   white-space: nowrap;
}

JSFIDDLE

.selectize-input .item {
  width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 5px !important;
}