材料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-选择

回答

相关问题