Bug - select width are incorrect when resizing

[hmillet]

Bug description:

When you open a page with a "ui-select", all is fine. But if you resize your window, and then you want to open a select, the div shown has not the correct size. Sometimes very small, sometines huge

Link to minimally-working plunker that reproduces the issue:

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

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

Your own demo, with google chrome

Screenshot

[guilhermemsilva]

This problem theoretically have been resolved in pull request #1631.

But this problem still occurs to me aswell, as I replied in the issue #880, take a look there if you can.

[hmillet]

@guilhermemsilva thanks for answer, I will take a look at #880

[guilhermemsilva]

I have an easier solution, that worked for me:

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

[benjaminapetersen]

Continue to see this issue as well.

[hmillet]

I've just tested the @guilhermemsilva workaround.
This works for me. So thanks a lot for that 👍

But I still waiting for a real fix.

[davidsalamon]

@guilhermemsilva workaround produces the following results when using multiple select:

Basically the empty area that's supposed to be clickable becomes 100% width and thus, when at least one item is selected, the item's pill pushes the click area to the second row (see caret just below the pill)

[qkang07]

same problem.
I have another scenario, the text box is 10px shorter when resized:

I can find the source code which caused all these problem, but I can't understand the purpose.

ctrl.sizeSearchInput = function() {

    var input = ctrl.searchInput[0],
        container = ctrl.searchInput.parent().parent()[0],
        calculateContainerWidth = function() {
          // Return the container width only if the search input is visible
          return container.clientWidth * !!input.offsetParent;
        },
        updateIfVisible = function(containerWidth) {
          if (containerWidth === 0) {
            return false;
          }
          var inputWidth = containerWidth - input.offsetLeft - 10;
          if (inputWidth < 50) inputWidth = containerWidth;
          ctrl.searchInput.css('width', inputWidth+'px');
          return true;
        };

    ctrl.searchInput.css('width', '10px');
    $timeout(function() { //Give tags time to render correctly
      if (sizeWatch === null && !updateIfVisible(calculateContainerWidth())) {
        sizeWatch = $scope.$watch(function() {
          if (!updaterScheduled) {
            updaterScheduled = true;
            $scope.$$postDigest(function() {
              updaterScheduled = false;
              if (updateIfVisible(calculateContainerWidth())) {
                sizeWatch();
                sizeWatch = null;
              }
            });
          }
        }, angular.noop);
      }
    });
  };