CODEWITHSUNDEEP
angularangular-materialmat-selectmat-option
joseluisbz
joseluisbz

Reputation: 1648

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?

Upvotes: 0

Views: 536

Answers (2)

Nimer Awad
Nimer Awad

Reputation: 4199

Are you sure that you imported @angular/theme?

check this: Angular Theme

Upvotes: 1

Max K
Max K

Reputation: 1121

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

Upvotes: 1

Related Questions