Strange behaviour with Bootstrap theme

[OzoneNZ]

Bug description:

Very odd behaviour with a <ui-select> element in Chrome Android (happens in latest Chrome stable release AND dev release).

The select element initially renders fine, like this: http://i.imgur.com/YLG2xUz.png

Tapping on it brings up the keyboard and focuses on it - at which point the element extends outward on the right for some reason. The initial problem I was having with this overflow is that when inside a Bootstrap modal, it goes past the modal border: http://i.imgur.com/fOjek9d.png

Selecting an option from the select then restores the original sizing: http://i.imgur.com/fAeHpe6.png

However, tapping on the select again makes the control pretty much disappear: http://i.imgur.com/Ww8YjPY.png

Link to minimally-working plunker that reproduces the issue:

Example Bootstrap: http://angular-ui.github.io/ui-select/demo-bootstrap.html

Plunkr can be found from the "Bootstrap" option in the example list here: http://angular-ui.github.io/ui-select/#examples

Version of Angular, UI-Select, and Bootstrap/Select2/Selectize CSS

Angular: 1.5.6 locally, Plunkr uses 1.5.0, happens on both versions.

UI-Select: 0.18.0 locally, Plunkr uses 0.16.1, happens on both versions.

Bootstrap/Select2/Selectize CSS (if applicable): As far as I can tell this only affects the Bootstrap theme (I'm using version 3.3.6)

[aselby]

I've got the same issue ... ever fine an answer ?

[OzoneNZ]

@aselby I was forced to switch to regular jQuery-based select2 with no Angular bindings - not the ideal solution, but I wouldn't count on this being resolved any time soon unfortunately

[ehutch79]

it's because the bootstrap normalize gives the input[type=search] selector a different box sizing.

adding

.ui-select-container input { box-sizing: border-box; }

to your css fixes it.

[skalamichal]

Thanks @ehutch79.

I had to add type for the input: .ui-select-container input[type="search"] { box-sizing: border-box; }