我是Angular 4的新手。我已经使用AngularJS创建了一些项目。
我开始使用 Teradata Covalent Framework 来构建前端结构,并专注于构建Catalog Web App的菜单内容和卡片列表。
我在https://stackblitz.com/edit/covalent-dashboard-ynyp1w?file=main.ts中下载了这个完整的模板,您可以在下图中看到:
如您所见,问题是页面右侧的两个滚动条。我认为只有内部滚动应该存在,因为它不会干扰灰色工具栏。
readme.md
任何已经使用过此模板或非常擅长CSS的人都可以告诉我如何从网站中删除这个额外的蠕动滚动条?并且( Bonus )如何从Facebook替换那些新的瘦小滚动条的旧滚动条样式?
答案 0 :(得分:1)
只需将overflow:hidden;
添加到内部内容的css类
答案 1 :(得分:1)
问题是您的网页内容包含在<mat-sidenav-container flex>
元素中。您需要在其之外使用<td-layout-nav>
元素。
我已在this 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>