Как отрегулировать высоту блока выбора углового материала?

Question

У меня есть следующий код

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

Но ее не работает. Можете ли вы, пожалуйста, помочь мне сделать это? Спасибо!

Answer 1

Это то, что вам нужно? CodePen

Markup

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

Answer 2

Вы должны создать пользовательскую директиву для поддержки такой настройки, основанный на регулярных <select></select> элементов. К сожалению, угловые материалы md-select элемент не предоставляет никаких связанных опций.