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下拉框寬度自動調整大小

回答

相關問題