Selectize 减少了下拉菜单的宽度，使选项难以辨认

Question

在表格中加载 selectize 选择时，表格会自动将单元格宽度减小到可能挤压 selectize 下拉列表的最小尺寸。当您打开下拉菜单时，选项难以辨认 - 前 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 个字符宽度的数据...

不要过分关心下拉菜单的宽度，但是当它打开时，我希望选择显示所有数据并确保它可以被读取并且可见...

Answer 1

为下拉菜单插入最小宽度

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

Answer 2

我希望有一个存在的选项或方法来完成这项工作，但显然不是，所以我设计了一个不完美的解决方案，但它与我想得到的一样接近。

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

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