css Question posted in
Some basic documentation can be found here.

Css – Dropdown positioning for this mat-select in Angular

I am using Angular 15.1.3, Angular Material 14.0.4 and Angular CDK 14.0.4

I am able to position the panel of the Dropdown just below or above the Dropdown Textbox.

This is the code I have used for mat-select

<mat-select (selectionChange)="securityQuestionChange($event)" placeholder="Select and Answer 3 Security Questions" [disabled]="sqSelected.length === 3 || isRegistrationSuccess" panelClass="custom-panel-sec-questions">
    <mat-option *ngFor="let sq of securityQuestions" [value]="sq.value">
        {{ sq.question }}
    </mat-option>
</mat-select>

But when I use the below code in styles.scss, it is not working as other Dropdowns..

.custom-panel-sec-questions {
  margin: 60px 0px !important;
}

Below is the screenshot of the style it applied..

Security Questions

Could not figure out where it is going wrong…

Tags:

2

Answers


  1. 0

    Try replacing your css with the below code:

    ::ng-deep .custom-panel-sec-questions {
  margin: 60px 0px !important;
}

    Does it work?

    Login or Signup to reply.
  2. 0 
    :host {
 ::ng-deep {
  .custom-panel-sec-questions {
    margin: 60px 0px !important;
   }
 }
}

    Try this one – So basically put ng-deep inside the :host to isolate it’s style. Do let me know if this works for you ?

    Happy coding! Cheers 🥂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search