AngularJS dropdown box width prevent from auto-resizing

Question

HTML

<select class = "box" ng-model="selected" ng-options="person.id as person.name for person in people" >
<option value="">----select----</option>
</select>

CSS

.box {
    height: 21px !important;
    width: 96%;
}

Hi, I'm updating the $scope.people and call $scope.$apply(... to update the dropdown. When I do this, the dropdown select box automatically increases the size and adjust the size according to my content. My content isn't even close to overflowing though. Would be great if I could get some help! In the link, $scope.people is statically defined since I wasn't able to demo the messaging service I'm using at the moment. I could just fix the width into a certain px size. But then when the browser window size is changed, the box size won't adjust according to that. Would be great to know if there's a way to fix this! Thanks :) http://jsfiddle.net/Lvc0u55v/7937/

Update I didn't mention this because I didn't know this would be the problem. This select box is in the table. It's within the <td></td> tag if that makes any difference..

what are you updating it with ? It will help a lot if you could create plunk. — Alok
– Alok, Commented Aug 4, 2016 at 11:08
@Alok I'm using a messaging service within the company. I'm updating the people with an array that has objects with properties, id and name. — Eugenia Kim
– Eugenia Kim, Commented Aug 4, 2016 at 11:12
@Alok At first, $scope.people is an empty list. And then something like above is provided. The box size changes when the content is populated. — Eugenia Kim
– Eugenia Kim, Commented Aug 4, 2016 at 11:24
Look at jsfiddle.net/4et7da1s/1 ... Should it have replicated your issue ?? — Alok
– Alok, Commented Aug 4, 2016 at 11:29

Ritu Singh · Accepted Answer · 2016-08-04 11:38:56Z

2

Please make sure you don't fix the height and width of the box and let bootstrap make it responsive on its own

Try this, it is working

<div class="container">
<div ng-controller="MyCtrl">
  <select class = "box" ng-model="selected" ng-options="person.id as person.name for person in people" >
    <option value="">----select----</option>
  </select>
</div>
</div>

and in css:

.box {
    height: auto;
    width: auto;
}

answered Aug 4, 2016 at 11:38

Ritu Singh

1712 silver badges6 bronze badges

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

1 Comment

Eugenia Kim Over a year ago

I just tried this but the select box increases its size, as soon as the $scope.people is updated.

Alok · Accepted Answer · 2016-08-04 11:40:29Z

0

I have created a fiddle http://jsfiddle.net/4et7da1s/2/

You can solve the problem with a mix of max-width and making the width as auto.

Something like this:

.box {
    height: 21px !important;
    width: auto;
    max-width: 20%;
}

answered Aug 4, 2016 at 11:40

Alok

1,3101 gold badge11 silver badges21 bronze badges

Collectives™ on Stack Overflow

AngularJS dropdown box width prevent from auto-resizing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related