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 ?

sonikyogurt · Accepted Answer · 2016-10-18 09:27:03Z

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

answered Oct 18, 2016 at 9:27

sonikyogurt

3801 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular-ui-select broken with bootstrap form-inline

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related