CODEWITHSUNDEEP
htmlcssangularjsng-options
Eugenia Kim
Eugenia Kim

Reputation: 143

AngularJS dropdown box width prevent from auto-resizing

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..

Upvotes: 0

Views: 4893

Answers (2)

Alok
Alok

Reputation: 1310

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%;
}

Upvotes: 0

Ritu Singh
Ritu Singh

Reputation: 171

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;
}

Upvotes: 2

Related Questions