材料2：難度定型寬度MD-選擇

https://plnkr.co/edit/aUYfOBJ0MdywKW2pphOM?p=preview 材料2：難度定型寬度MD-選擇

<md-select placeholder="food" style=""><!-- no width stylings that work --> 
    <md-option *ngFor="let food of foods" [value]="food.value"> 
     {{ food.viewValue }} 
    </md-option> 
</md-select>

請參閱上述plunker。我在用佔位符'food'設計md-select的寬度方面遇到了很多困難。爲什麼我不能在md-select標籤中做一個style =「」？我曾嘗試針對這個同樣的div與一個沒有反應的類。我也嘗試過使用在Chrome，Firefox和IE的F12工具中可見的.md-select-trigger類。沒有。

工作的唯一方法是取消選擇瀏覽器工具區中可用的.md-select-trigger類的最小寬度或彈性空間。

我不知道我在這裏處理的是什麼。

來源

2017-02-24 John Stafford

不應該有任何東西阻止你使用'style =「/ *你想要什麼* /」'，例如[this plnkr]（https://plnkr.co/edit/Wqg1vvxE2DINhetzL28e?p=preview） – Aeveus

@Aeveus不，我不認爲它是一件沉悶的事情。我的本地同樣的事情。我曾嘗試過style =「min-width：10px」，style =「width：10px」等，以顯示寬度的明顯變化，沒有任何東西。 –

您試圖更改當前組件範圍之外的內容。 Angular [查看封裝]（https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation），這意味着此組件中定義的樣式不會滲入不同的組件。您可以通過全局樣式文件覆蓋此視圖，或者關閉視圖封裝（儘管不建議這樣做）。 – Aeveus

我使用它（在全局樣式文件中）來修補它。

.mat-select-trigger { min-width: 50px; }

來源

2017-05-10 17:07:10

爲了增加普爾瓦astawa的回答，您可以使用/深/在你的組件的CSS改變.MAT選觸發最小寬度

.mat-select /deep/ .mat-select-trigger { 
    min-width: 60px; 
}

這是因爲.MAT - 選擇 - 觸發器正在md-select模塊中進行樣式化，而組件通常無法訪問該模塊。

上述方法很快將被刪除。改爲使用ViewEncapsulation.None。 View Encapsulation

來源

2017-08-02 12:38:32

'/ deep /'陰影穿孔後代組合符被標記爲已棄用。看到我的答案。 –

在此之前':: ng-deep'應該優先於'/ deep /'以獲得更廣泛的兼容性。 **引用** [docs]（https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep） – Saif

可能是有點晚了，但無論如何... 要正確地做到這一點，你需要將View Encapsulation設置爲無您的組件上：

@Component({ 
    templateUrl: './my.component.html' , 
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None, 
})

然後在你的組件的CSS，你可以這樣做這樣的：

.mat-select-trigger { min-width: 50px; }

從我張貼的鏈接：

查看的Enc apsulation = None表示Angular沒有封裝視圖。 Angular將CSS添加到全局樣式中。前面討論的規則，隔離和保護範圍不適用。這個與將組件的樣式粘貼到HTML中的基本相同。

來源

2017-08-23 15:09:11

這應該設置爲正確的答案！謝謝 – SuperMarco

作品增加尺寸，但佔位符不擴大...仍然是正確的解決方案。 – jmogera

材料2：難度定型寬度MD-選擇

回答

相關問題