fix(form-field): remove 200px width since it messes up flex layouts

[mmalerba]

No description provided.

[ChenReuven]

i think that this issue prevent upgrading to new angular material version cause the global look of the input in the application is break(high bug) and the WA for that is too high.

[mmalerba]

@ChenReuven you can use a CSS override to put this back how it used to be until this PR makes it in:

/* class repeated for increased specificity */
.mat-form-field.mat-form-field {
  width: auto;
}

[ChenReuven]

@mmalerba Thanks Bro! i will try it :)

[mmalerba]

seems to have some broken select tests, will investigate

[kara]

Note: need to update screenshot tests

[Upimage]

@mmalerba Thanks for the hint.
Using 'auto' results in longer rending calculations in FF & IE. Therefore, I prefer to use small values like .mat-form-field.mat-form-field { width: auto; } and 'fxFlex' in my HTML

[benb7760]

@mmalerba the temporary workaround you suggested affects the paginator. conflicts with 56px width in .mat-paginator-page-size-select. I've solved this temporarily with

mat-paginator .mat-form-field.mat-form-field {
  width: 56px;
}

[kamok]

How do I get the changes made in this PR? I'm a bit confused about what it means by " andrewseguin merged commit 160a511 into angular:master". I checked npm for angular 2 material https://www.npmjs.com/package/@angular2-material/input, and the last update was 6 months ago.

Edit: I already made the CSS change of

mat-form-field {
  width: 100%;
}

on my project, but it's more of a GitHub question.

[skovalyov]

After this change horizontal forms with fxFlex are not looking as they supposed to. They do not shrink beyond their minimum width. For example, this snippet:

<div fxLayout="row" fxLayoutGap="10px">
  <mat-form-field fxFlex>
    <input matInput>
  </mat-form-field>
  <mat-form-field fxFlex>
    <input matInput>
  </mat-form-field>
  <mat-form-field fxFlex>
    <input matInput>
  </mat-form-field>
  <mat-form-field fxFlex>
    <input matInput>
  </mat-form-field>
  <mat-form-field fxFlex>
    <input matInput>
  </mat-form-field>
  <mat-form-field fxFlex>
    <input matInput>
  </mat-form-field>
  <mat-form-field fxFlex>
    <input matInput>
  </mat-form-field>
</div>

All form fields remain 180px in width due to mat-form-field-infix style.

[AppField]

Sorry for taking out this thread.
I have some trouble with the 180px fixed width due to mat-form-field-infix
Is there a way to remove/override this width style?

[vadim82]

We are also experiencing a problem with a fixed width of the mat-form-field-infix class. It is not letting us shrink the mat-select component.

[AppField]

@vadim82
You mentioned the mat-select component.
So, did you get the normal mat-form-field with an input element shrinking?

[vadim82]

The only thing I was able to do was to override that selector and set the min width to something smaller. It is a terrible solution, but I can't think of any other workaround.

        .flex-form-field { 
            .mat-form-field-infix { 
                width: auto !important;
                min-width: 74px !important;
            }
        }

[sophistyx]

Is there a fix for this yet? Without wrapping mat-select components in mat-form-field elements I lose placeholder functionality but wrapping them breaks my bootstrap/flex column widths as described above?

[mmalerba]

I don't think there's a way to set these properties that's going to make it work perfectly for everyone out of the box. If you need to change the width just add some CSS:

.mat-form-field .mat-form-field-infix {
  width: auto;
}

You should not need to use !important, just use a rule with greater specificity than a single class

[AppField]

Maybe I am missing something, but I can't get it to set the width to auto.

I have created a Stackblitz for this:
Stackblitz mat-form-field-infix

[mmalerba]

@Webfield that is because view encapsulation is enabled in the component you added the style to. There are a couple ways to fix it:

1. Add the style to a global stylesheet rather than the component's styles
2. Add encapsulation: ViewEncapsulation.None to your component's decorator to turn off view encapsulation.
3. Use ::ng-deep .mat-form-fiel .mat-form-field-infix to pierce the encapsulation

Here's a fixed version of your stackblitz using option number 3: https://stackblitz.com/edit/angular-material-whdy24?file=app%2Fapp.component.css

[AppField]

Thanks you so much!

Since the shadow piercings >>> have been deprecating, I've totally forgotten about the ViewEncapsulation

[philmday]

Adding this to the global styles made the fxFlex attribute work for me

mat-form-field {
  min-width:auto !important;
  .mat-form-field-infix {
    width: auto;
  }
}

[Akitha]

Just Add this , it works for me
::ng-deep .mat-form-fiel .mat-form-field-infix

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}