angular-ui-select broken with bootstrap form-inline

Question

There were several threads about getting inline-form label to be inline with angular-ui-select, and I have managed to get that label inline, but still looks like angular-ui-select width is broken in form-inline.

I have created Plnkr to demonstrate that. I have 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;
}

So that label is inline with select box, but select does not take same width as inputs, and if you press on select box, then select expands in same width as input bellow.

Question is, how to make angular-ui-select same width as input bellow, so there is no shrink/expand effect on select box, when activating it.

I will add screenshots, that shows, how it acts now:

Select in inactive state

Select in active state

As you can see, element width is changing on click, but how to make it same as input bellow, as input bellow is taking width dynamically ?

Answer 1

I had the same issue in some projects I developed and I was always setting a min-height. I think I found a solution.

Just added

.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