如何在Angular Covalent模板中删除重复的滚动条? [英] How to remove duplicated scrollbar in Angular Covalent templates?

问题描述

我是Angular 4的新手.我只用AngularJS创建了几个项目.

我开始使用 Teradata Covalent Framework 构建前端结构，并专注于为Catalog Web App构建菜单内容和卡片列表.

我将完整的模板下载到

如您所见，问题是页面右侧的那两个滚动条.我认为只有内部滚动条在那里存在，因为它不会干扰灰色的工具栏.

 < td-layout>< td-navigation-drawer flex [sidenavTitle] ="name" logo ="assets:covalent">顶层导航抽屉</td-navigation-drawer>< td-layout-nav [toolbarTitle] =(media.registerQuery('gt-xs')| async)吗?'Dashboard':''" logo ="assets:covalent" navigationRoute ="/"><按钮垫图标按钮td-菜单按钮tdLayoutToggle>< mat-icon>菜单/mat-icon></button>< div td-toolbar-content>顶部工具栏</div>< td-layout-manage-list#manageList>< div td-sidenav-content layout ="column" layout-fill>Sidenav内部列表仪表板</div>< mat-sidenav-container flex>< mat-sidenav #sidenav align ="end">右侧导航</mat-sidenav>< td-layout-nav>< div td-toolbar-content>第二个工具栏</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>页脚内容</td-layout-footer></td-layout-nav></td-layout> 

任何已经使用此模板或非常擅长CSS的人都可以告诉我如何从网站上删除此多余的滚动条?还有( Bonus )如何将那些旧的滚动条样式替换为来自Facebook的那些新的紧身滚动条?

解决方案

问题是您的页面内容被包装在< mat-sidenav-container flex> 元素中.您需要在其外部使用< td-layout-nav> 元素.

我已经修复了此stackblitz 中的页面.下面是该代码的简化版本.

 < td-layout>< td-navigation-drawer flex [sidenavTitle] ="name" logo ="assets:covalent">顶层导航抽屉</td-navigation-drawer>< td-layout-nav [toolbarTitle] =(media.registerQuery('gt-xs')| async)吗?'Dashboard':''" logo ="assets:covalent" navigationRoute ="/"><按钮垫图标按钮td-菜单按钮tdLayoutToggle>< mat-icon>菜单/mat-icon></button>< div td-toolbar-content>顶部工具栏</div>< td-layout-manage-list#manageList>< div td-sidenav-content layout ="column" layout-fill>Sidenav内部列表仪表板</div>< td-layout-nav>< div td-toolbar-content>第二个工具栏</div>< mat-sidenav-container flex>< mat-sidenav #sidenav align ="end">右侧导航</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>页脚内容</td-layout-footer></td-layout-nav></td-layout> 

I am super new to Angular 4. I've onlçy created few projects with AngularJS.

I started using Teradata Covalent Framework to build front-end structure and focus on building the menu content and card lists for a Catalog Web App.

I downloaded this full template in https://stackblitz.com/edit/covalent-dashboard-ynyp1w?file=main.ts which you can see in the image below:

As you can see, the problem is those two scrollbars in the right side of the page. I think that only the inner scroll should exist there because it is not interfering with the gray toolbar.

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

Anyone who already worked with this template or is very good at CSS could tell me how to remove this creep extra scrollbar from the site? And (Bonus) How could I replace those old scrollbar style for those new skinny scrollbars from Facebook?

解决方案

The problem is that your page content is being wrapped in a <mat-sidenav-container flex> element. You'll want to use the <td-layout-nav> element outside of that.

I've fixed the page in this stackblitz. A simplified version of the code is below.

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

这篇关于如何在Angular Covalent模板中删除重复的滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！