Angular Material: Increase form size

Question

I am searching for a possibility to control the size of input elements in angular material. I want to create a form as shown here https://i.sstatic.net/nnkup.png but the main problems (tested with the md-display-2 class) are caused by the animation of the labels as their position in the input field is defined absolutely in the css.

Is there a way to create a form as show in the image or do I have to find a workaround?

Answer 1

Just add a class to the md-input-container and set the CSS font-size accordingly.

Example: http://jsbin.com/cadutojemo/1/edit?html,css,output

HTML

<md-input-container class="bigClass" flex>
    <label>Last Name</label>
    <input ng-model="user.lastName">
</md-input-container>

CSS

.md-input-has-value.bigClass > input {
    font-size: 30px;
}