垫选择下拉位置未对齐

本文介绍了垫选择下拉位置未对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用一些角度材质组件，但输入框和选择选项元素出现问题.选择选项未正确对齐.当我点击查看选择选项列表时，它显示我在当前 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));

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

Hammerjs