resizing

[bhyatm]

Hi,

I have a ui-select but there is a problem when resizing the div the control is contained in
when resizing the containing div (outside of browser resize) the control does not resize until you add a new item or remove an existing item

Is there a fix for this ?

Mac

[wesleycho]

Please post a reproduction in Plunker.

[peterreisz]

I have a similar issue.

Plunkr: http://plnkr.co/edit/P2oKYO9Kx80Clog0IgnN?p=preview

Open the ui-select, the width is fine.
Resize the plunkr split window and open the ui-select again.
The search input field very long (width: 739px inline style in my case).

Versions:
Angular: 1.5.6
Bootstrap: 3.3.6
Ui-select: 0.18.0

[guilhermemsilva]

+1

I have almost the same problem as @peterreisz.

When you resize the screen, angular adds "style='width: ...px;'" to the input, it varies according to the screen, but always the wrong size, bigger than it's parent.

Versions:
AngularJS -> v1.5.5
angular-ui-bootstrap -> Version: 1.3.3 - 2016-05-22
ui-select ->Version: 0.17.1 - 2016-06-09T20:41:58.363Z

UPDATE

I altered the function "ctrl.sizeSearchInput", in the line 737, "var inputWidth = containerWidth - input.offsetLeft - 10;", I changed to "var inputWidth = containerWidth - input.offsetLeft - 30;".

It worked for me.

UPDATE 2

I guess the correct way would be to set offsetLeft to 20, right?

How can I set it? I added the attribute "offsetLeft='20'" to my html, but when the control is rendered, angular ignores it.

UPDATE 3

So, I didn't realize that "offsetLeft" is a DOM property.
Maybe it could be created a "customOffsetLeft", so you can work with it to change the width of the input.

[guilhermemsilva]

I have a suggestion to resolve this, could someone please make a PR?

It's kinda simple, I created an attribute called "customOffsetLeft" that you set in the element and it is used when you calculate the width of the input when the screen is resized.

Here's my suggestion:

Code changes.txt

[guilhermemsilva]

I have an easier solution, that worked for me:

.ui-select-search {
width: 100% !important;
}