Hidden elements calculated at 0px width

[cureau]

If a ui-select element is hidden on page load, then width is calculated as 0px.

I can override this in my css with:

.form-group input {
    width: 100% !important;
}

but then the dynamically calculated widths are overridden and after entering a multiselect item, the cursor is forced to a new line.

[henrik-m]

Just encountered the same issue when I tried to use ui-select inside the second tab of ui.bootstrap.tabs (see http://angular-ui.github.io/bootstrap) which is not visible at the beginning.

Edit: This plunker demonstrates the issue: http://plnkr.co/edit/PdhN3f?p=preview

After the first selection the width of the second ui-select input is updated correctly.

[svarjavand]

I have same problem! multiselect is in the second tab of a JQuery UI accordion. Can't select items unless a pre-selected item is removed first.
I have same issue even if I put my multiselect in a hidden div that gets displayed on a button click.

[careywalker]

Same for me. The plunker by @henrik-m above demonstrates the exact issue I am having.

[careywalker]

I have been looking through the code and see that the input box size is set here:

ctrl.sizeSearchInput = function(){
  var input = _searchInput[0],
      container = _searchInput.parent().parent()[0];
  _searchInput.css('width','10px');
  $timeout(function(){
    var newWidth = container.clientWidth - input.offsetLeft - 10;
    if(newWidth < 50) newWidth = container.clientWidth;
    _searchInput.css('width',newWidth+'px');
  }, 0, false);
};

The issue here is that container.clientWidth is 0 for hidden elements so newWidth is going to be 0 as well. I am not sure what the fix is for this but I'm trying to find a solution...

[careywalker]

Ok, so I have a fix for this issue. This code uses the jQuery innerWidth() to get the width of the hidden container element.

ctrl.sizeSearchInput = function () {
    var input = _searchInput[0], container = _searchInput.parent().parent();
    _searchInput.css('width', '10px');
    $timeout(function () {
        var newWidth = container[0].clientWidth - input.offsetLeft - 10;
        if (newWidth < 50) newWidth = container.innerWidth();
        console.log("newWidth : " + newWidth);
        _searchInput.css('width', newWidth + 'px');
    }, 0, false);
};

[mkeremguc]

any non-jquery fix/workaround for that issue ?

[tictcotq]

As a workaround to fix select control at hidden tabs you could render content of a tab only when user switches to it.

  <tabset>
    <tab select="tabOneRendered = true">
      <tab-heading>Tab One</tab-heading>
      <ui-select ng-if="tabOneRendered">...</ui-select>
    </tab>
    <tab select="tabTwoRendered = true">
      <tab-heading>Tab Two</tab-heading>
      <ui-select ng-if="tabTwoRendered">...</ui-select>
    </tab>
</tabset>

[cmlenz]

I've tried the Plunk linked to above with 0.11.1 and it works fine now. See http://plnkr.co/mDfda7

(I thought it might have been fixed by #712 but it was already working with 0.10.0. Not sure which exact change fixed this.)

@seacucumba are you seeing this problem with the current version? If so, can you please provide an example?

[kshutkin]

I can see that if an ui-select multiple initialized in hidden part of template then its input is 10px only. It is hard to click on it.

After some experiments I found simple workaround:

$timeout(function () {
    $scope.$digest();
});

[jjm340]

Is this not being fixed - what exactly is the workaround because this is still a problem in the latest version