How to set size of ui-select?

Question

I'm using ui-select with bootstrap. as we know, bootstrap has input-lg, input-sm... but is there a good way to change the size of ui-select?

score 1 · Answer 1 · answered Sep 23 '15 at 08:04

1

Could you please tell what is "a good way" for you? If CSS is good enough, then you can style elements with it, would look like this.

.form-input-sm .ui-select-toggle {height: 40px}

That is for simple HTML:

<ui-select theme="bootstrap" ng-model="model">
  <ui-select-match placeholder="Placeholder"></ui-select-match>
  <ui-select-choices refresh-delay="0" repeat="item in roleList">
    <div>{{item.name}}</div>
  </ui-select-choices>
</ui-select>

And I'm not magician, I don't know the selectors just looking at HTML here. If you need to find proper selectors, you can use browser developer tools. The same technique is used to override all default styles in Bootstrap, for example.

answered Sep 23 '15 at 08:04

Georgy

2,410
3
21
35

changing the height isn't enough – sports Jun 08 '16 at 02:50
Here you are changing height of all ui-select controls. I think that the point is how to specify a css class to ui-select to change it size if you want to resize to a custom size a particular ui-select item. – gsubiran Sep 23 '16 at 15:41
By the way @Georgy you are not magician, you are only hardcoding styles... I think there must be another way to do the same only decorating html with some built in Bootstrap class/es. That is the point of the question when @ xlhuang said " there a good way to". – gsubiran Sep 23 '16 at 15:51

score 0 · Answer 2 · edited Jan 13 '22 at 11:41

My answer may be 6 years late, but for the sake of all who will encounter this issue in future, the fix that worked for me was to use inline css to set the height of the ui-select

 <ui-select theme="bootstrap" style="min-height:34px" ng-model="model">
  <ui-select-match placeholder="Placeholder"></ui-select-match>
  <ui-select-choices refresh-delay="0" repeat="item in roleList">
    <div>{{item.name}}</div>
  </ui-select-choices>
</ui-select>

How to set size of ui-select?

2 Answers2