Angular -ui-select broken with bootstrap form-inline

Question

There were several threads related to having the inline-form label embedded in angular -ui-select, and I managed to get this inline label, but it still looks like angular -ui-select the width is broken in the form-line.

I created Plnkr to demonstrate this. I added css code

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

Thus, this label is embedded in the selection box, but the selection does not have the same width as the inputs, and if you click on the selection box, then select an extension with the same width as the input below.

The question is how to make angular -ui-select the same width as the input below, so when this effect is activated, there is no shrink / expand effect on the selection field.

I will add screenshots that show how it works now:

, , , , ?

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