title: Is there a way to scale down the Material Design (AngularJS) <md-input> element?
body: <p>I am using the <code>&lt;md-input&gt;</code> tag but it has a height too high. Is there  way to make it smaller?</p>
  
  <p>Right now what I have is this:</p>
  
  <pre><code>&lt;md-content flex class="md-padding" style="font-size:1.2em; max-width:90px; "&gt;
    &lt;md-input-container&gt;
      &lt;label&gt;X&lt;/label&gt;
      &lt;input ng-model="motionAbsX"&gt;
    &lt;/md-input-container&gt;
  &lt;/md-content&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/WZ2RC.png" alt="enter image description here"></p>
  
  <p>So the first line is that size because the <code>&lt;md-input&gt;</code>. It is 34px x 121px so I want to reduce its height. I tried using the max-height to it but all I got was a scroll bar:</p>
  
  <p><img src="https://i.stack.imgur.com/A5WOP.png" alt="enter image description here"></p>
  
  <p>Is it possible to change its height or it is inherit to the element? Scaling down is acceptable but I have't found a way to do it.</p>
  
  <p><img src="https://i.stack.imgur.com/mHtqR.png" alt="enter image description here"></p>