垫选择下拉位置未对齐 [英] mat-select dropdown position not aligned

问题描述

我正在使用一些角度材质组件，但输入框和选择选项元素出现问题.选择选项未正确对齐.当我点击查看选择选项列表时，它显示我在当前 div 之外，或者可以说页面左侧不正确.

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

附上图片的样子:

推荐答案

请确保您已在应用模块中导入 BrowserAnimationsModule，并将hammerjs 导入到主 ts 文件中.这是角度材料

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

我的应用模块代码:

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 { }

主要ts代码:

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));

这篇关于垫选择下拉位置未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！