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

Question

当在 table 中加载 selectize selects 时，table 会自动将单元格宽度减小到可能挤压 selectize 的最小尺寸下拉菜单。当您打开下拉菜单时，选项难以辨认 - 前 3-4 个字符可以读取，其余的字符被隐藏。

这是一个示例 fiddle:

$(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

为下拉菜单插入最小宽度

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

Answer 2

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

创建下拉列表时，我使用 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>');

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

Selectize reduces width of dropdown making options illegible

selectize.js