Question

我正在使用Angular 5和Angular Materials开发一个简单的网站。我的网站有一个下拉菜单，高于我网站的整个内容，用于设置排序标准。问题是，当我尝试打开它时，菜单会一直打开我站点的底部。可能是什么原因？

以下是用于此网站的.html：

  <mat-card >
  <mat-card-header id="game-list-menu">
    <div id="game-list-menu-left">
      <button mat-button [matMenuTriggerFor]="sortMenu">Sort by: {{sortBy}}</button>
      <mat-menu #sortMenu="matMenu">
        <div id="game-list-menu-sort">
          <button mat-menu-item (click)="changeSort(1)">Name</button>
          <button mat-menu-item (click)="changeSort(2)">Platform</button>
          <button mat-menu-item (click)="changeSort(3)">Rating</button>
        </div>
      </mat-menu>
    </div>
    <div id="game-list-menu-title">Game List</div>
    <div id="game-list-menu-right">
      <form #searchForm="ngForm" (ngSubmit)="search(searchForm.value)">
        <mat-form-field>
          <input matInput [(ngModel)]="searchGame.name"
                 required name="name" #name>

        </mat-form-field>
        <button mat-raised-button color="primary" type="submit"
                [disabled]="!searchForm.form.valid">Search</button>
        <button mat-raised-button color="primary" (click)="searchForm.reset(); showAll()">
          <span>Show all</span>
        </button>
      </form>
    </div>
  </mat-card-header>

  <mat-card-content id="game-list-container">

    <mat-card class="game-list-item" *ngFor="let game of games">
      <mat-card-header>
        <mat-card-title>{{game.name}}</mat-card-title>
        <mat-card-subtitle>{{game.platform}}</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="{{game.gameCoverPath}}" alt="{{game.name}} cover">
      <mat-card-content>
        <p>Rating:</p>
        <span *ngFor="let goldstar of getIterator(game.rating)">
            <img src="https://dl.dropbox.com/s/ngxkbxyy8hmpbaw/Star_gold.png?dl=0" height="20px" width="20px"/>
        </span>
        <span *ngFor="let greystar of getIterator(5 - game.rating)">
            <img src="https://dl.dropbox.com/s/pnuorfnn75xib3o/Star_grey.png?dl=0" height="20px" width="20px"/>
        </span>
        <p></p>

      </mat-card-content>
      <mat-card-actions>
        <button mat-button [routerLink]="['/game-details', game.id]">Details</button>
        <button mat-button>Edit</button>
      </mat-card-actions>
    </mat-card>


  </mat-card-content>
  <mat-card-actions id="container_actions">
    <button mat-fab color="primary" [routerLink]="['/game-add']">+</button>
  </mat-card-actions>
</mat-card>

以下是用于此网站的CSS：

.game-list-item {
  max-width: 300px;
  padding: 25px;
  margin: 10px;
  display: inline-block;
}
#container_actions {
  text-align: right;
  padding: 25px;
}
.game-list-item mat-card-title {
  font-size: 24px;
  font-weight: bold;
}
.game-list-item mat-card-subtitle {
  font-size: 18px;
}
.game-list-item mat-card-header {
  display: inline;
}
.game-list-item .mat-card-content {
  padding: 15px 0 0 0;
}
.game-list-item mat-card-actions {
  text-align: right;

}
#game-list-menu {

}

#game-list-menu div {
  display: inline;
  padding: 20px;
  width: 33%;
}

#game-list-menu-left {
  text-align: left;
}
#game-list-menu-title {


}
#game-list-menu-right {
  text-align: right;

}

#game-list-menu-sort {
}

以下是用于整个项目的styles.scss文件：

@import url("https://fonts.googleapis.com/css?family=Karla");

* {
  font-family: 'Karla', serif;
}

h1 {
  width: auto;
  text-align: center;
  font-size: 50px;
}

mat-card-header {
  width: auto;
  text-align: center;
  font-size: 35px;
}

Answer 1

将此添加到style.css

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

下拉菜单弹出整个站点下方而不是按钮下方

1 个答案: