Usage within Bootstrap inline form

[istibekesi]

I'm facing multiple issues while using ui-select within a bootsrap inline form:
http://plnkr.co/edit/tAlsDona9LS8D6KUQziS?p=preview

1. Within form-group, label and ui-select are not inline, even if there are plenty place for it.
2. Caret and text are overlapping.
3. Long content overflows:
   
4. Short content displays strange background:
   

Please, fork and correct my plunkr if I'm doing something wrong...

[upmauro]

Sorry if i wrong, but when i open your plunker i see this:

[istibekesi]

Please, enlarge your window size: either by resizing the plunker preview area using the vertical slider, or launch the preview in separate window. Just make sure, your width is bigger than 768px.

But anyway, try to select a longer value, like "Los Angeles International Airport, 1 World Way, Los Angeles, CA 90045, USA", and see what happens: text overflows.

[wolfg1969]

+1

[ahocquet]

Indeed, ui-select is broken with form-inline bootstrap style.

[lukaszgrolik]

http://plnkr.co/edit/kuR85O0LkENQCqdnAMYR?p=preview

I managed to fix this weird ui-select's width behaviour by

.form-inline .ui-select-container .ui-select-toggle,
.form-inline .ui-select-container .ui-select-search {
  width: 100%;
}

[yaojingguo]

+1

[poorva29]

+1 , this problem persists for me too when i use ui-select with the bootstrap theme and inline form

[matteliot]

same...

[okaufmann]

+1

[giladegozi]

+1

+1 for this issue

Fix for this could be

.form-inline .ui-select-container {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

Works with this example:

<form class="form-inline">
    <div class="form-group">
        <label for="action">Label</label>
        <ui-select id="action" theme="bootstrap" ng-model="selectedItem">
            <ui-select-match>
                <span ng-bind="$select.selected.name"></span>
            </ui-select-match>
            <ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
                <span ng-bind="item.name"></span>
            </ui-select-choices>
        </ui-select>                
    </div>
</form>

But select width isn't same as other input's width, so i have created question in stackoverflow

http://stackoverflow.com/questions/33854737/angular-ui-select-broken-with-bootstrap-form-inline

[tarunrathi999]

Add postion:absolute , it may resolve the error to some extent

[rubinsh]

+1

[carloshpds]

+1