选择控制错位答案

【问题标题】：Selectize control misplacement选择控制错位
【发布时间】：2021-04-20 15:02:01
【问题描述】：

我之前已经成功使用过 selectize.js 库。但是在当前情况下，我遇到了一个奇怪的视觉错误。一旦我将selectize 类应用到我的select 下拉列表（绿色框），它就会得到一个奇怪的偏移量，而且显示的选项也几乎整齐（见红色框）。

这都是 rails 应用程序的一部分。这是我的 HTML 代码：

.list-group.m-b-md
  .list-group-item
    = simple_form_for new_item, url: idea_interactions_path, remote: true do |f|
      .input-group
        = f.input :sprint_id, as: :hidden
        = f.input :interaction_pairings, label: false, as: :select, collection: interaction_pairings(@sprint), input_html: {class: 'selectize'}

以及 Coffee 脚本中的 JS 代码：

#= require selectize

interactionChanged = ->
    alert('Dropdown Changed')

$ ->
  $('.selectize').selectize
    closeAfterSelect: true
    selectOnTab: true
    onChange: interactionChanged

【问题讨论】：

由于解决方案涉及原始问题范围之外的辅助 CSS，我投票结束此问题，因为它不太可能与未来的读者相关。
@JeremyCaney。我明白你在说什么。然而，使用 selectize.js 和 bootstrap 对我来说并不是那么奇特。而在这些现实中，我并没有做任何太花哨的事情。
很公平。我现在看到form-control is 在原始问题中——它只是在屏幕截图中，而不是提取的标记样本中。（虽然它会生成？）无论如何，我已经撤回了我的投票。感谢您澄清这一点。

标签： javascript html css selectize.js

【解决方案1】：

罪魁祸首是 CSS 类 form-control 删除它解决了上述所有问题。

【讨论】：