0

Derived from this question: Change style Select Angular Material

I face this problem with Angular Material, specifically with mat-select and its mat-options: The mat-options are shown after other components.

enter image description here

I need to show the options just after the its place holder above the component below (hinding it); not after nor between! For this case, The blue rectangle should be hidden by the green one.

Here my code:

https://stackblitz.com/edit/angular-ivy-buotqn?file=src%2Fapp%2Fcore%2Fcomponents%2Flayout%2Flayout.component.html

how to show the list of options above the component below and below the place-holder of the select?

joseluisbz
  • 1,491
  • 1
  • 36
  • 58
  • See if this helps -> https://stackoverflow.com/questions/70641097/mat-select-control-is-not-working-in-html – Siddhant Jan 18 '22 at 14:52

2 Answers2

1

Seems like the material styles are not active. Adding

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

to your style.css should fix your problem.

This sets one of the default themes, if you want to build your own theme the documentation can be found here: https://material.angular.io/guide/theming

Max K
  • 1,062
  • 9
  • 11
1

Are you sure that you imported @angular/theme?

check this: Angular Theme

Nimer Awad
  • 3,967
  • 3
  • 17
  • 31