javascript - angular-ui-select 与 bootstrap form-inline 一起损坏

Question

关于让内联表单标签与 angular-ui-select 内联有几个话题，我已经设法让该标签内联，但看起来 angular-ui-select 宽度在 form-inline 中仍然被破坏。

我创建了 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 与输入波纹管的宽度相同，以便在激活选择框时没有收缩/展开效果。

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

在非事件状态下选择

在事件状态下选择

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

Answer 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