Components: mat-form-field width specifity

[dzamula]

Bug, feature request, or proposal:

The current solution with defined width on .mat-form-field class makes it harder to style components. E.g. I cannot use bootstrap way to specify width with selectors like "col-xs-14" on components, because it has the same level of specificity.

What is the expected behavior?

Leave the decision about components width to developers and remove the width property on the .mat-form-field class

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular: 4.4.3
material: 2.0.0-beta.11

[willshowell]

See https://github.com/angular/material2/pull/7083

[Akitha]

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

[brycekmartin]

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

We have used this in the past, but ::ng-deep is being deprecated. I am also running into an issue where the style rules stick around after I navigate off the component using the router's navigate command and go to a previous component and it messes up form fields on that component. Landed here looking for a solution or replacement for the ::ng-deep

[Roitr]

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

We have used this in the past, but ::ng-deep is being deprecated. I am also running into an issue where the style rules stick around after I navigate off the component using the router's navigate command and go to a previous component and it messes up form fields on that component. Landed here looking for a solution or replacement for the ::ng-deep

When you use ng-deep, the final css rule will not include the component encapsulation selector (the attribute selector added to each component).

The easy fix is to define your own specific selector. for example:

.my-selector ::ng-deep {
[your style here]
}

This way it will not affect other pages (unless you also use the same selector in them).

You can also wrap it with the :host selector:

:host ::ng-deep {
[your style here]
}

[angular-automatic-lock-bot[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._}