选择减少下拉选项的宽度，使选项难以辨认。

Question

当在表中加载选择选择时，该表自动将单元格宽度减小到尽可能压缩选择下拉列表的最小尺寸。当您打开下拉时，选项是难以辨认的-前3-4个字符可以读取，其余的是隐藏的。

这是一把小提琴的样品：

$(function() {
    $('select').selectize({    plugins: ['remove_button']
});

          <form role="form" id="contacts">

            <table>
            <tr><td>  <select placeholder="Select a person..." multiple>
                <option value="">All</option>
                <option value="4">Thomas Edison</option>
                <option value="17">John Doe</option>
                <option value="19">John Donut</option>
                <option value="21">Dante Joe</option>
                <option value="22">Jo Dod</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
              </select></td>
              <td>  <select placeholder="Select a person..." multiple>
                <option value="">All</option>
                <option value="4">Thomas Edison</option>
                <option value="17">John Doe</option>
                <option value="19">John Donut</option>
                <option value="21">Dante Joe</option>
                <option value="22">Jo Dod</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
              </select></td>
              <td>  <select placeholder="Select a person..." multiple>
                <option value="">All</option>
                <option value="4">Thomas Edison</option>
                <option value="17">John Doe</option>
                <option value="19">John Donut</option>
                <option value="21">Dante Joe</option>
                <option value="22">Jo Dod</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
              </select></td>
              <td>  <select placeholder="Select a person..." multiple>
                <option value="">All</option>
                <option value="4">Thomas Edison</option>
                <option value="17">John Doe</option>
                <option value="19">John Donut</option>
                <option value="21">Dante Joe</option>
                <option value="22">Jo Dod</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
              </select></td> <td>  <select placeholder="Select a person..." multiple>
                <option value="">All</option>
                <option value="4">Thomas Edison</option>
                <option value="17">John Doe</option>
                <option value="19">John Donut</option>
                <option value="21">Dante Joe</option>
                <option value="22">Jo Dod</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
              </select></td> <td>  <select placeholder="Select a person..." multiple>
                <option value="">All</option>
                <option value="4">Thomas Edison</option>
                <option value="17">John Doe</option>
                <option value="19">John Donut</option>
                <option value="21">Dante Joe</option>
                <option value="22">Jo Dod</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
              </select></td> <td>  <select placeholder="Select a person..." multiple>
                <option value="">All</option>
                <option value="4">Thomas Edison</option>
                <option value="17">John Doe</option>
                <option value="19">John Donut</option>
                <option value="21">Dante Joe</option>
                <option value="22">Jo Dod</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
              </select></td></tr>
            </table>
             

          </form>

https://jsfiddle.net/csjqaf3m/

正如您所看到的，列表中的项目是完全难以辨认的。

我的列不能有固定的宽度，因为加载到它们中的数据是不同的--在一个例子中，我可以有3个最大6个字符的选项，接下来可以加载15个字符宽的数据……

不要过于担心下拉列表的宽度，但是当它打开时，我希望select显示所有的数据，并确保它可以被读取并且是可见的.

Answer 1

我希望有一个选项或方法，以使这项工作，但显然没有，所以我设计了一个解决方案，不是完美，但它是接近我认为我会得到。

在创建下拉列表时，我使用jQuery测试下拉列表中每个项的长度，并存储最大长度。然后，我用破折号填充默认的select选项，使长度匹配最大的元素：

var optionLength = 0;

this
.data()
.sort()
.unique()
.each( function(d) {
    // Get the length of the longest 
    optionLength = (d.length>optionLength?d.length:optionLength);
    select.append($('<option>' + d + '</option>'));
} );

var spacer = "-".repeat(optionLength/2);
select.prepend('<option value="">'+spacer+' All '+spacer+'</option>');

Answer 2

插入下拉列表的最小宽度。

.selectize-dropdown{
  min-width:250px !important;  
}