select2 容器小于下拉菜单答案

【问题标题】：select2 container smaller than dropdownselect2 容器小于下拉菜单
【发布时间】：2014-02-06 19:52:29
【问题描述】：

我已经在我的应用程序中实现了 angular-ui select2，它工作正常，但是选择框容器（在搜索上方）的呈现小于下拉面板。

这就是我的意思：

HMTL：

<select 
    ui-select2="{placeholder:'Select a User', dropdownAutoWidth: true}"
    class="animated slideInDown" 
    id="entityDropDown" 
    ng-model="selectedUser" 
    ng-options="user as user.name for user in users" 
    ng-change="getUserInfo(selectedUser)"> <option>Place Holder</option>
</select>

【问题讨论】：

您是否希望下拉列表不滚动并且列表完全可见？
搜索上方的区域与下拉菜单的大小不同。
您是否尝试向选择输入添加宽度属性？或者检查样式是否覆盖了输入宽度？我在 select2 网站上看到的所有内容都显示了元素本身的宽度（可能是通过 js 设置的）
我试过了，但所有内容都应用于下拉框，而不是上面的那个部分。我什至无法在控制台中选择该元素，这很奇怪。

标签： javascript css angularjs angular-ui angularjs-select2

【解决方案1】：

添加到你的ctor参数width:

<select
  ui-select2="{placeholder:'Select a User', dropdownAutoWidth: true, width: '100%'} >
</select>

应该可以。

【讨论】：

我最终编辑了 css 以强制 .select2-container 宽度。这似乎奏效了。我不确定为什么会这样。
我一开始也有同样的铅。不需要进行 css 编辑，我只是使用了给定的三个 ctor 参数。你试过这个ctor dict吗？我很好奇。
是的，但是宽度 100% 太多了。然而它没有用。
哦，嗯，我使用 twitter 引导程序，所以我已经处于浮动跨度中。我调整了跨度的大小，然后宽度 = 100。