Difficulty with selectize.js dropdown overflow in mobile
Asked Answered
F

2

1

So I'm creating an autocomplete 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.net/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
          });
Fitly answered 9/6, 2014 at 13:9 Comment(0)
K
5
.selectize-input {
   white-space: nowrap;
}

JSFIDDLE

Kryska answered 9/6, 2014 at 14:12 Comment(0)
O
0
.selectize-input .item {
  width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 5px !important;
}
Oyler answered 23/9, 2016 at 18:38 Comment(1)
How does this answer the question?Mansell

© 2022 - 2024 — McMap. All rights reserved.