如何调整角度材料选择框的高度？

问题描述：

<md-input-container style="margin-right: 10px;width: 13%;" class="ScenarioDetailsDropdown" > 
     <h4 class="LabelsPageOne">Geography Type</h4> 

     <md-select ng-model="GeographyType" ng-change="SelectGeographyType()" > 
      <md-option ng-repeat="(index,ModelTableRow) in ModelTable | unique:'geographyType'" ng-value="ModelTableRow.geographyType" >{{ModelTableRow.geographyType}}</md-option> 
     </md-select> 

</md-input-container>

如何减少选择框的高度？另外，如何减少md-input-container中的顶部填充？我试过用这个：

<md-input-container style="margin-right: 10px;width: 13%;" class="ScenarioDetailsDropdown" style="padding : 0px 0px !important;margin:0px 0px;" >

但是，它不工作。你能帮我做这个吗？谢谢！

答

这是你以后的事情吗？ CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" style="padding:100px"> 
    <md-input-container class="ScenarioDetailsDropdown" > 
    <h4 class="LabelsPageOne">Geography Type</h4> 
    <md-select ng-model="GeographyType" ng-change="SelectGeographyType()" md-container-class="mySelect"> 
     <md-option ng-repeat="(index,ModelTableRow) in ModelTable" ng-value="ModelTableRow.geographyType" >{{ModelTableRow.geographyType}}</md-option> 
    </md-select> 
    </md-input-container> 
</div>

CSS

.ScenarioDetailsDropdown { 
    margin: 0; 
    background: green 
} 

.ScenarioDetailsDropdown h4 { 
    margin: 0; 
} 

.ScenarioDetailsDropdown md-select { 
    background: white; 
} 

.ScenarioDetailsDropdown md-select md-select-value { 
    height: 20px; 
    min-height: 20px; 
} 

.mySelect { 
    margin-top: 25px; 
    margin-left: 20px; 
}

嗨@camden_kid ....非常感谢....我需要两件事... 1。减少顶部边缘，2.减少白色选择框的高度....你已经告诉我如何减少顶部的边缘....所以这就解决了我的问题没有。 1 ....你还可以告诉我如何降低白色选择框的高度？...谢谢你！ – Sabyasachi

@Sabyasachi查看更新。特别是'md-select-value'的CSS。 –

@camden_kid ....非常感谢！ – Sabyasachi

答

你必须创建一个自定义指令来支持这种基于正则<select></select>元素定制。不幸的是，Angular Materials md-select元素不提供任何相关选项。

如何调整角度材料选择框的高度？

相关推荐