Javascript 展开时的角度下拉列表显示在屏幕底部

因此，我试图创建一个下拉列表，但当单击该下拉列表时，它不会与其他输入重叠，而是显示在屏幕底部

以下是相关的HTML代码块：

                <div class="form-row">
                   <!-- Grid column -->
                   <div class="col-md-6">
                      <mat-form-field>
                         <mat-label>Toppings</mat-label>
                         <mat-select [formControl]="toppings" multiple>
                            <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
                         </mat-select>
                      </mat-form-field>
                   </div>
                   <!-- Grid column -->
                   <!-- Grid column -->
                   <div class="col-md-6">
                      <!-- Material input -->
                      <div class="md-form form-group">
                         <input mdbInput type="password" class="form-control" id="inputPassword4MD" placeholder="John's Law Firm">
                         <label for="inputPassword4MD">Firm Name</label>
                      </div>
                   </div>
                   <!-- Grid column -->
                </div>
                <!-- Grid row -->

最后，这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { AboutComponent } from './about/about.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './home/home.component';
import {MatButtonModule,MatIconModule} from '@angular/material';
import { ContactComponent } from './contact/contact.component';
import { ServicesComponent } from './services/services.component';
import { ScheduleComponent } from './schedule/schedule.component';
import {MatInputModule} from '@angular/material/input';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatSelectModule} from '@angular/material/select';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    AboutComponent,
    HomeComponent,
    ContactComponent,
    ServicesComponent,
    ScheduleComponent,
    ContactComponent,
    ServicesComponent,
    ScheduleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

在styles.scss文件中需要一个棱角材质核心主题。只需在styles.scss中添加以下内容：

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

---

或者任何你想要的主题。您需要核心主题才能使组件正常工作，如果您不喜欢核心默认颜色，则可以创建自定义主题。

您可以提供显示如何使用下拉列表的HTML代码块吗？或者更好，在stackblitz上复制它？@AlmaniaM我在中复制了错误的html部分，但我编辑了控制台，抛出了某种错误？@Adrian-看起来不错。我唯一能想到的就是一些CSS覆盖了定位。您可能需要提供任何可能会弄乱它的CSS，或者提供StackBlitz链接。

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';