angular-ui-select 被 bootstrap form-inline 破坏

Posted 2023-03-06

【中文标题】angular-ui-select 被 bootstrap form-inline 破坏

【英文标题】：angular-ui-select broken with bootstrap form-inline

【发布时间】：2016-02-24 14:19:27

【问题描述】：

有几个线程关于让内联表单标签与 angular-ui-select 内联，我已经设法使该标签内联，但看起来 angular-ui-select 宽度在表单内联中被破坏了。

我创建了Plnkr 来证明这一点。 我添加了css代码

.form-inline .ui-select-container .ui-select-toggle,
.form-inline .ui-select-container .ui-select-search 
    width: 100%;


.form-inline .ui-select-container 
    display: inline-block;
    vertical-align: middle;
    width: auto;

因此该标签与选择框内联，但选择不采用与输入相同的宽度，如果您按下选择框，则选择以与下面的输入相同的宽度展开。

问题是，如何使angular-ui-select与输入波纹管宽度相同，因此激活时选择框没有收缩/扩展效果。

我将添加屏幕截图，显示它现在的行为：

在非活动状态下选择

选择处于活动状态

如您所见，元素宽度在点击时会发生变化，但是如何使其与输入波纹管相同，因为输入波纹管正在动态获取宽度？

【参考方案1】：

我在开发的一些项目中遇到了同样的问题，我总是设置min-height。我想我找到了解决办法。

刚刚添加

.form-inline .ui-select-container input.form-control.ui-select-search.ng-hide 
  display: block !important;
  visibility: hidden;
  height: 0;
  border: 0;
  padding: 0;

http://plnkr.co/edit/b1CfIHdDEu4qBsxHeEzc