adjust the full length of md-input-container in Angular Material

Question

I need the full length of the input fields in my md-card. How you can see I defined the css-class md-block but it doesn't work as expected.

That's my source code:

<md-card layout-fill>
   <md-card-content>
      <md-input-container class="md-block">
         <label>Test1</label>
         <input ng-model="test1" />
      </md-input-container>

      <md-input-container class="md-block">
         <label>Test2</label>
         <input ng-model="test2" />
      </md-input-container>

      <md-input-container class="md-block">
         <label>Test3</label>
         <input ng-model="test3" />
      </md-input-container>
   </md-card-content>
</md-card>

Do anyone have an idea what's the problem is?

You should overwrite it if you want a different aspect from the default. See how to change the font size of the tooltips of Angular Material here: https://stackoverflow.com/questions/44587532/set-font-size-of-angular-material-tooltip — GLR, Aug 31 '17 at 15:59
Can you set up a [plunker](http://plnkr.co/) with your code so I can play around with it? — Kyle Krzeski, Aug 31 '17 at 16:05
Your custom css is overwriting the default css behaviour of angular material. Your HTML code is correct. Check this: https://jsfiddle.net/prerak6962/2e4s7053/3/ — Prerak Sola, Aug 31 '17 at 16:08

score -2 · Answer 1 · edited Sep 01 '17 at 22:02

-2

<md-form-field class="input-fields">
    <input mdInput placeholder="New Password" #username>
</md-form-field>

.input-fields {
    width: 100%;
}

This is what I'm using right now and it works as expected

edited Sep 01 '17 at 22:02

Omi

3,954
5
21
41

answered Aug 31 '17 at 16:18

d.zurico

89
7

I'm using angular material with angular1. that means html and javascript not typescript. And the documentation tells, that I don't need to define a custom css class when I use the class `md-block` – yuro Aug 31 '17 at 17:13

adjust the full length of md-input-container in Angular Material

1 Answers1