mat-select dropdown position not aligned

问题

I'm using some angular material components but something went wrong with input box and and select option elements. The select option is not aligned properly. when i click to see select option list it showing me outside of my current div or can say left side of page which is not correct.

ng -v

Angular CLI: 1.7.4
Node: 8.11.1
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.5
@angular/cli: 1.7.4
@angular/material: 5.2.5
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Image is attached how it looks like:

回答1:

Plase make sure you have imported BrowserAnimationsModule in your app module and hammerjs in to the main ts file. Here is the guide line for angular material

My app module code:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTooltipModule, MatButtonModule, MatCheckboxModule, MatSelectModule } from 
'@angular/material';

@NgModule({
imports: [
    MatTooltipModule,
    MatButtonModule,
    MatCheckboxModule,
    MatSelectModule,
    BrowserAnimationsModule,
    BrowserModule
 ],
 providers: [],
 bootstrap: []
})
export class AppModule { }

Main ts code:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

来源：https://stackoverflow.com/questions/54633483/mat-select-dropdown-position-not-aligned