Angular ui-select-match placeholder automatically setting width

Question

I have <ui-select-match placeholder="Select areas...">{{$somestuff}}</ui-select-match>

The input box with the placeholder is getting its width set to 10px; automatically no matter what I do (as seen in the picture below). I have no idea why this is happening, and if I touch anything on the page or even adjust the size of the browser window it goes back to displaying the entire placeholder.

Does anyone know why this is happening? In the console I can see that it is says: element.style: width: 10px; but there is no reference to any css file where that is coming from, and I haven't touched any css files anyway.

Saajan · Accepted Answer · 2017-05-04 19:36:33Z

1

The 10px width you are taking about is added by angular ui-select library. One solution you can do is override the width of the textbox by using css !important property.

.ui-select-container{
      width:50px!important; //put whatever pixel value you need.it wont change
}

ui-select-container class is added by the library after the ui-select is rendered.

answered May 4, 2017 at 19:36

Saajan

6901 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harry B. Over a year ago

thank you for your response. My only question is why wasn't this happening before and also why does it go back to normal if adjust the size of the browser window or click on any other inputs on the page?

Saajan Over a year ago

Angular-ui-select is wrapper around the library called select2. In select2 library the width is given as some value by default. This value is added by javascript thats why you see element.style: width: 10px;. In most of the example in their website you can see that they override some values through css. Its standard procedure. Ultimately its left to you to add whatever value you want to see in the browser.

Saajan Over a year ago

and changes its value whenever you adjust the screen because it renders the library every time you make changes. The library has a $watch function within, which is triggered and the value resets

Collectives™ on Stack Overflow

Angular ui-select-match placeholder automatically setting width

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related