Search code examples
angularangular-materialmat-selectmat-option

Mat-options are shown after other component in Angular Material (Custom Theme)

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?

Solution

  • 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