Angular Material md-input-container takes large space

Question

I am working with a angular material sample. According to my default code md-input-container takes large space. My output as follows.

But I have found md-input-content with less space as follows.

I am not sure how to do that. My example of md-input-container code as follows.

  <md-input-container class="md-block" flex-sm>
    <label>Name</label>
    <input md-maxlength="50" required name="name" ng-model="user.name"/>
  </md-input-container>

Answer 1

you can read this documentation for that

simple code snippet about your question:

<div flex="100" class="flex flex-col">
    <md-input-container class="md-block">
       <label>Name</label>
       <input md-maxlength="50" required name="name" ng-model="user.name"/>
    </md-input-container>

    <md-input-container class="md-block">
           <label>Surname</label>
           <input md-maxlength="50" required name="surname" ng-model="user.surname"/>
    </md-input-container>
</div>