AngularJS下拉框宽度自动调整大小

HTMLAngularJS下拉框宽度自动调整大小

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

嗨，我更新$scope.people阻止和呼叫$scope.$apply(...更新下拉。当我这样做时，下拉选择框会自动增加尺寸并根据我的内容调整尺寸。尽管如此，我的内容甚至没有接近满溢。如果我能得到一些帮助，会很棒！在链接中，$scope.people是静态定义的，因为我无法演示目前正在使用的消息服务。我可以将宽度固定为某个px大小。但是，当浏览器窗口大小发生变化时，框的大小将不会根据该大小进行调整。很高兴知道是否有办法解决这个问题！谢谢:) http://jsfiddle.net/Lvc0u55v/7937/

更新我没有提到这一点，因为我不知道这将是问题。该选择框位于表格中。这如果让任何区别<td></td>标签内..

来源

2016-08-04 Eugenia Kim

你有什么与更新呢？如果你能创造出庞然大物，它将会有很大的帮助。 – Alok

@Alok我在公司内部使用消息服务。我正在用具有属性，ID和名称的对象的数组更新人员。 –

你能给我一个JSON样本，你更新它吗？ – Alok

请确保你没有修复框的高度和宽度，让引导使其响应自身

试试这个，这是工作

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

和CSS：

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

来源

2016-08-04 11:38:56

我刚刚尝试过，但选择框会在$ scope.people更新后增加大小。 –

我创建了一个小提琴http://jsfiddle.net/4et7da1s/2/

您可以通过混合使用最大宽度并将宽度设置为自动来解决问题。

事情是这样的：

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

来源

2016-08-04 11:40:29 Alok

AngularJS下拉框宽度自动调整大小

回答

相关问题