2016-08-22 73 views
1

我有以下代码如何调整角度材料选择框的高度?

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

Angular Material Dropdown

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

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

但是,它不工作。 你能帮我做这个吗? 谢谢!

回答

3

这是你以后的事情吗? CodePen

enter image description here

标记

<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; 
} 
+0

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

+0

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

+0

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

0

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