AngularJS Dropdown-Box Breite verhindern, dass Auto-Größenänderung

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

Hallo, ich bin die $scope.people Aktualisierung und rufen $scope.$apply(... das Drop-down zu aktualisieren. Wenn ich dies tue, vergrößert das Dropdown-Auswahlfeld automatisch die Größe und passt die Größe entsprechend meinem Inhalt an. Meine Inhalte sind jedoch nicht annähernd überfüllt. Wäre toll, wenn ich Hilfe bekommen könnte! In der Verbindung ist $scope.people statisch definiert, da ich den Messaging-Dienst, den ich gerade verwende, nicht demonstrieren konnte. Ich könnte die Breite einfach auf eine bestimmte px Größe festlegen. Wenn dann jedoch die Größe des Browserfensters geändert wird, wird die Boxgröße nicht entsprechend angepasst. Wäre toll zu wissen, ob es einen Weg gibt, das zu beheben! Thanks :) http://jsfiddle.net/Lvc0u55v/7937/

aktualisieren ich das nicht erwähnte, weil ich nicht weiß, dass dies das Problem sein würde. Diese Auswahlbox befindet sich in der Tabelle. Es ist innerhalb des <td></td> Tages, wenn das einen Unterschied macht ..

Answer 1

Bitte stellen Sie sicher, dass Sie nicht die Höhe und Breite der Box beheben und lassen Bootstrap es auf seinem eigenen

Versuchen Sie dies als Reaktion machen, es funktioniert

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

und in CSS:

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

Answer 2

ich eine Geige http://jsfiddle.net/4et7da1s/2/

0 erstellt haben

Sie können das Problem mit einer Mischung aus maximaler Breite und Breite als automatisch lösen.

Etwas wie folgt aus:

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