Is there a way to scale down the Material Design (AngularJS) <md-input> element?

11,253

Use line height property. Change line-height as u like.

<md-input-container style="line-height:8px">
   <label>abc</label>
   <input ng-model="abc" type="text"/>
</md-input-container>
Share:
11,253
Hugo Nakamura
Author by

Hugo Nakamura

Updated on September 16, 2022

Comments

  • Hugo Nakamura
    Hugo Nakamura over 1 year

    I am using the <md-input> tag but it has a height too high. Is there way to make it smaller?

    Right now what I have is this:

    <md-content flex class="md-padding" style="font-size:1.2em; max-width:90px; ">
      <md-input-container>
        <label>X</label>
        <input ng-model="motionAbsX">
      </md-input-container>
    </md-content>
    

    enter image description here

    So the first line is that size because the <md-input>. 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:

    enter image description here

    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.

    enter image description here