如何刪除Angular Covalent模板中的重復滾動條？

Question

我是Angular 4的新手。我已經使用AngularJS創建了一些項目。

我開始使用Teradata Covalent Framework來構建前端結構，並專注於構建Catalog Web App的菜單內容和卡列表。

我在https://stackblitz.com/edit/covalent-dashboard-ynyp1w?file=main.ts中下載了這個完整的模板，您可以在下圖中看到：

如您所見，問題是頁面右側的那兩個滾動條。 我認為只有內部滾動應該存在，因為它不會干擾灰色工具欄。

<td-layout>
  <td-navigation-drawer flex [sidenavTitle]="name" logo="assets:covalent">
    Top level navigation drawer
  </td-navigation-drawer>
  <td-layout-nav [toolbarTitle]="(media.registerQuery('gt-xs') | async) ? 'Dashboard' : ''" logo="assets:covalent" navigationRoute="/">
    <button mat-icon-button td-menu-button tdLayoutToggle>
      <mat-icon>menu</mat-icon>
    </button>
    <div td-toolbar-content>
      Top toolbar
    </div>
    <td-layout-manage-list #manageList>
      <div td-sidenav-content layout="column" layout-fill>
        Inner sidenav listing dashboards
      </div>

      <mat-sidenav-container flex>
        <mat-sidenav #sidenav align="end">
          Right Sidenav
        </mat-sidenav>
        <td-layout-nav>
          <div td-toolbar-content>
            Second toolbar
          </div>

          <div flex layout-gt-sm="row">
            <div flex-gt-sm="50">
              <mat-card>
                ...
              </mat-card>
            </div>
          </div>

        </td-layout-nav>
      </mat-sidenav-container>
    </td-layout-manage-list>
    <td-layout-footer>Footer content</td-layout-footer>
  </td-layout-nav>
</td-layout>

任何已經使用過這個模板或者非常擅長CSS的人可以告訴我如何從網站中刪除這個蠕變額外的滾動條？ 而且（ Bonus ）我如何用Facebook替換那些新的瘦小滾動條的舊滾動條樣式？

Answer 1

只需添加overflow:hidden; 到內部內容的css類

Answer 2

問題是您的頁面內容被包裝在<mat-sidenav-container flex>元素中。 您將需要使用<td-layout-nav>元素。

我已經修復了這個stackblitz中的頁面。 下面是代碼的簡化版本。

<td-layout>
  <td-navigation-drawer flex [sidenavTitle]="name" logo="assets:covalent">
    Top level navigation drawer
  </td-navigation-drawer>
  <td-layout-nav [toolbarTitle]="(media.registerQuery('gt-xs') | async) ? 'Dashboard' : ''" logo="assets:covalent" navigationRoute="/">
    <button mat-icon-button td-menu-button tdLayoutToggle>
      <mat-icon>menu</mat-icon>
    </button>
    <div td-toolbar-content>
      Top toolbar
    </div>
    <td-layout-manage-list #manageList>
      <div td-sidenav-content layout="column" layout-fill>
        Inner sidenav listing dashboards
      </div>

      <td-layout-nav>
        <div td-toolbar-content>
          Second toolbar
        </div>

        <mat-sidenav-container flex>
          <mat-sidenav #sidenav align="end">
            Right Sidenav
          </mat-sidenav>
          <div flex layout-gt-sm="row">
            <div flex-gt-sm="50">
              <mat-card>
                ...
              </mat-card>
            </div>
          </div>

        </mat-sidenav-container>
      </td-layout-nav>
    </td-layout-manage-list>
    <td-layout-footer>Footer content</td-layout-footer>
  </td-layout-nav>
</td-layout>