Sabyasachi Sabyasachi - 3 months ago 65
AngularJS Question

How to adjust the height of Angular Material Select Box?

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>


Angular Material Dropdown

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

Is this the kind of thing you are after? CodePen

enter image description here

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