diff --git a/src/lib/form-field/_form-field-theme.scss b/src/lib/form-field/_form-field-theme.scss index 010b6b368ce5..b10651618b96 100644 --- a/src/lib/form-field/_form-field-theme.scss +++ b/src/lib/form-field/_form-field-theme.scss @@ -23,12 +23,6 @@ $underline-color-warn: mat-color($warn); $underline-focused-color: mat-color($primary); - // Define the width here so that it is easier for users to override with one css class worth - // of specificity. - .mat-form-field { - width: 200px; - } - .mat-form-field-placeholder { color: $placeholder-color; } diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss index a3e5bbf295d2..16224842b93b 100644 --- a/src/lib/form-field/form-field.scss +++ b/src/lib/form-field/form-field.scss @@ -6,6 +6,10 @@ $mat-form-field-hint-min-space: 1em !default; // The height of the underline. $mat-form-field-underline-height: 1px !default; +// Infix stretches to fit the container, but naturally wants to be this wide. We set this in order +// to have a a consistent natural size for the various types of controls that can go in a form +// field. +$mat-form-field-default-infix-width: 180px !default; .mat-form-field { @@ -60,6 +64,7 @@ $mat-form-field-underline-height: 1px !default; position: relative; flex: auto; min-width: 0; + width: $mat-form-field-default-infix-width; } // Used to hide the placeholder overflow on IE, since IE doesn't take transform into account when