How to keep the position of the Angular select options with the field?

0
votes

In using ng2-google-charts and angular-material the select list is below the chart while the control is above the chart. How do I keep these together?

<mat-form-field>
  <mat-label>Continent</mat-label>
  <mat-select [(ngModel)]="continents" (change)="onSelectContinent()">
    <mat-option *ngFor="let continent of continents | keyvalue" [value]="continent.key">{{continent.value}}</mat-option>
  </mat-select>
</mat-form-field>

The select list is ini cdk-overlay-container html element which is rendered outside of the <app_root> element.

The module imports

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';

enter image description here

1
angularangular-material

1 Answers

0
votes

I was missing a theme

Add

https://material.angular.io/guide/theming#defining-a-custom-theme

to the top of the styles.css file as described in enter link description here