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;
}

因此,标签与选择框内联,但是选择的输入宽度不同,如果按下选择框,则选择与输入波纹相同宽度的扩展.

问题是,如何使角度-ui选择与输入波纹相同的宽度,因此激活它时,选择框上没有收缩/扩展效果.

我将添加截图,显示它现在的行为:

选择处于非活动状态

选择处于活动状态

正如您所看到的,元素宽度在点击时会发生变化,但如何使其与输入波纹相同,因为输入波纹是动态的宽度？

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