18

I have this structure of html using Angular Material Select

<mat-form-field class="year-drpdwn-vacay-stock">
    <mat-select placeholder="Year">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let yr of year"  [value]="yr">{{yr}}</mat-option>
    </mat-select>
</mat-form-field>

I placed a class because I also use Select in other components. I tried adding 

::ng-deep .mat-select-panel {
    margin-top: 20%; 
}

in CSS to customize, but the problem is, other components containing another select box also gets affected (inherits the margin-top CSS)

Currently I have this CSS

.year-drpdwn-vacay-stock mat-select.mat-select :host ::ng-deep .mat-select-panel {
    margin-top: 20%; 
}

But it still doesn't work.

UPDATE

Goal: I want the options panel to move a bit downward upon opening the select box which is why I want .mat-select-panel to have a top margin of 20%

Char
  • 2,073
  • 8
  • 28
  • 45

3 Answers3

35

Use cdk-overlay-container as based and go to the options pane like this, mat-select uses absolute position without any child in it. so you need to apply your style to cdk-overlay-container

.cdk-overlay-container .cdk-overlay-pane{
   margin-top: 7%;
}

Here is the demo

Edit:

Ok so you have a conflict problem with other elements you can add 

panelClass="testClass"

and 

<mat-select placeholder="Favorite food" panelClass="testClass">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

And change your class like this

.cdk-overlay-container .cdk-overlay-pane .testClass{
margin-top: 7%;
}

demo

Just code
  • 13,553
  • 10
  • 51
  • 93
2

To move a option panel bit downward upon opening the select box, use 'disableOptionCentering' attribute like below, which works for me.

<mat-select placeholder="Favorite food" disableOptionCentering>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
Karthik Raja Ayyanar
  • 21
  • 1
1
  1. If you apply the style to class directly in styles.css (root) with, !important tag it will overwrite any other styles. But you will break encapsulation by doing it.
  2. If you apply styles in the component using /deep/ the style will be overwritten, mat-form-field /deep/ (class-name) {} (Deprecated issues) please read https://blog.angular-university.io/angular-host-context/ for an in-depth explanation

  3. Because of Deprecating issues, you can actually try to add/remove classes using vanilla javascript, but manipulating dom directly is a bad practice.

    Summary: Using Deprecated syntax is bad, applying style on root level will cause encapsulation issues, manipulating dom directly is a bad practice, so you can use the tools provided by angular to manipulate the dom to resolve above issues, please refer below link to learn about best practice to manipulate dom in angular https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

Akshay Rajput
  • 1,978
  • 1
  • 12
  • 22
  • Thank you but there are no replacements yet https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep – Char Dec 10 '18 at 05:11
  • I guess because of encapsulations style won't go outside the component, use below CSS inside the component. (where you are using the element) /deep/ .mat-select-panel { margin-top: 20%; } – Akshay Rajput Dec 10 '18 at 05:32
  • @Akshay, did you try :host ::ng-deep .mat-select-panel { ... } with `:host` this limits to the current component. – Eric GODEFROY Jul 15 '19 at 16:06