UI-Select multiple search box has 0px width

[mattjames-counterpart]

When I create my ui-select within a hidden object (a second tab, in this case), the width of the search box (and place holder, and clickable area) has a width of 0px.

Here is the actual control that I'm creating, though I don't have a full set of code that I can share.

<ui-select multiple name="roles" ng-model="user.roles" theme="bootstrap" ng-required="true">
    <ui-select-match placeholder="Select roles...">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="item.id as item in roleList">
        <div>{{item.name}}</div>
    </ui-select-choices>
</ui-select>

After it's created, I can see the input control as such:

<input style="width: 0px;" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="ui-select-search input-xs ng-pristine ng-valid" placeholder="Select roles..." ng-disabled="$select.disabled" ng-hide="$select.disabled" ng-click="$select.activate()" ng-model="$select.search" type="text">

Is there any way to correct this, or force it to recalculate width when the area is shown?

[jox]

I'm having the same issue. I guess $select.sizeSearchInput() would need to be called when the ui-select gets visible. E.g.

angular.element(uiSelectMultiple).scope().$select.sizeSearchInput()

Not sure what would be the best way to trigger that.

Another quick hack would be to override the css. E.g.

.ui-select-multiple input.ui-select-search {
  width: auto !important;
}

[dimirc]

Can you put a plunker to reproduce it? then I can try fixing this faster

[dimirc]

Looks similar to #275 and should be resolved with PR #291

[jox]

I confirm #291 fixes it. Thank you very much!

[jox]

The dist is not updated in the branch fix-multiselect-width so it's not working if added as dependency in bower. Like:

"angular-ui-select": "git@github.com:angular-ui/ui-select.git#fix-multiselect-width"

[dimirc]

I'll be merging the PR today together with other fixes and releasing a new version too

Sent from my iPhone

On Oct 10, 2014, at 7:08 AM, Jonas Petersen notifications@github.com wrote:

The dist is not updated in the branch fix-multiselect-width so it's not working if added as dependency in bower. Like:

"angular-ui-select": "git@github.com:angular-ui/ui-select.git#fix-multiselect-width"
—
Reply to this email directly or view it on GitHub.

[jox]

Great, thanks.

[mattjames-counterpart]

What's the status of the new build containing this fix? Will it be available soon?

[dimirc]

#291 Merged
v0.8.3 Released

[jbonigomes]

I am having this issue, I am using ui-select version 0.12.0, here is a plunker (sorry I had to use v0.11.2 there):

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

Steps to replicate:

• Click the 'Click me!' button
  • The first time the dropdown opens the tags input box only displays the first letter in the placeholder text
• Click the 'Click me!' button again:
  • The entire placeholder text appears correctly

Thanks a lot.