How to adjust the height of AngularJS Material Select Box?

Question

I have the following code

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

How can i reduce the height of the Select Boxes? Also, how can I reduce the top padding in md-input-container? I tried using this :

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

But, its not working. Can you please help me to do this?? Thanks!

Answer 1

Is this the kind of thing you are after? 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;
}