在移动中使用selectize.js下拉溢出有困难 [英] Difficulty with selectize.js dropdown overflow in mobile

问题描述

所以我使用selectize.js创建一个自动完成搜索字段。它非常有效，除非我将下拉菜单缩放到一个小的移动屏幕。任何文本温和地长，导致它溢出到下一行，并拉伸下拉元素更远的右边，它应该。除了文本框增长，文本框旁边的图标会随之增长。

这里是一个jsfiddle演示的问题。如果你拖动屏幕，使'Result'部分非常小，你可以看到溢出。在我的网站上，它不仅溢出，而且向右延伸了框。

一个人会认为理想的属性是溢出

有没有办法解决这个问题？

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 
} 
  

解决方案

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

JSFIDDLE

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

解决方案

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

JSFIDDLE

这篇关于在移动中使用selectize.js下拉溢出有困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！