Question

我正在使用select2作为表单中的下拉列表，我喜欢使用表格布局（虽然这可能是问题的一部分？），以保持所有表格组元素的宽度相同。

问题在于，当我在select2下拉列表中输入文本时，宽度会发生变化（并且以奇怪的方式）。有没有办法可以强制浏览器给select2下拉列表保持固定的初始宽度？

这是我的HTML：

<table>
    <tr>
        <td>
            <div class="row">
                <div class="form-group">
                    <label>Title</label>
                    <input name="title" class="form-control"/>
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <td>
            <div class="row">
                <div class="form-group">
                    <label>a label</label>
                    <input class="form-control"/>
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <td>
            <div class="row">
                <div class="form-group">
                    <label>a label</label>

                    <select id="tag_list" class='form-control' multiple="multiple">
                        <option value='1'>abba</option>
                        <option value='2'>zabba</option>
                        <option value='3'>doo</option>
                    </select>
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <td>
            <div class="row">
                <div class="form-group">
                    <label for="category_type">Category Type:</label>

                    <select name="category_type" id="category_type_list" class="form-control">
                        <option value="" disabled selected>If there is a matching type for the category, please select it</option>
                            <option value="1">A</option>
                            <option value="2">B</option>
                    </select>
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <td>
            <div class="row action">
                <div class="form-group">
                    <div class="inline">
                        <button class="btn btn-primary form-control" type="submit">submit</button>  
                    </div>
                    <div class="inline">
                        <button class="btn btn-primary cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

和我的css：

.form-group{

    display: block;
}

table {
  margin-left: 5%;
  table-layout: fixed;
}

input {
  height: 30px;
  border: 1px solid #e3e3e3;
  padding: 3px 10px;
  width: 100%;
}

.inline{
    float:left;
    margin-right: 5px;
}

span.select2-container{
    width: 100% !important;
    tex-overflow: ellipsis;
}

Here是一个小提琴的例子。您可以通过在select2下拉列表中输入足够长的内容并按Enter键来查看宽度更改。我怎么能阻止这种情况发生？

Answer 1

我添加了一个新的css类，它似乎针对特定的选择框工作。 +等同于jquery next函数。这应该让你指向正确的方向。为了安全起见，请确保在加载select2 css后设置此项。

 #tag_list + .select2-container .select2-selection--multiple {
    max-width: 400px;
  }

因此，如果您希望所有select2s（单个或多个）的搜索框大小相同，请尝试...

   .select2-container  .select2-dropdown, 
   .select2-container .select2-selection--multiple {
    max-width: 300px;
  }

我将最后一个选择框转换为select2并尝试了这个。我正在做的是使用IE中内置的DOM资源管理器来查找给我提出问题的元素以及正在应用的类。然后我简单地覆盖或追加它们。

Answer 2

通过如下设置width=100%

<select id="tag_list" style="width:100%; display:block;" class='form-control' multiple="multiple">
 <option value='1'>abba</option>
 <option value='2'>zabba</option>
 <option value='3'>doo</option>
</select>

如何让select2 dropwdown保持恒定宽度

2 个答案: