Soy super nuevo en Angular 4. Solo he creado algunos proyectos con AngularJS.

Empecé a utilizar Teradata Covalent Framework para crear una estructura de front-end y centrarme en crear el contenido del menú y las listas de tarjetas para una aplicación web de catálogo.

Descargué esta plantilla completa en https://stackblitz.com/edit/ covalent-dashboard-ynyp1w? file = main.ts que puede ver en la siguiente imagen:

enter image description here

Como puede ver, el problema son esas dos barras de desplazamiento en el lado derecho de la página. Creo que solo el pergamino interior debería existir allí porque no interfiere con la barra de herramientas gris.

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

Cualquiera que ya haya trabajado con esta plantilla o que sea muy bueno en CSS podría decirme cómo eliminar esta barra de desplazamiento adicional del sitio. Y ( Bonus ) ¿Cómo podría reemplazar esos viejos estilos de barra de desplazamiento por esas nuevas barras de desplazamiento delgadas de Facebook?

1
Please_Dont_Bully_Me_SO_Lords 14 nov. 2017 a las 18:46

2 respuestas

La mejor respuesta

El problema es que el contenido de su página está envuelto en un elemento <mat-sidenav-container flex>. Querrá usar el elemento <td-layout-nav> fuera de eso.

He arreglado la página en este stackblitz. A continuación se muestra una versión simplificada del código.

<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>
1
Chic 14 nov. 2017 a las 16:21

Simplemente agregue overflow:hidden; a la clase css del contenido interno

2
floreich 14 nov. 2017 a las 15:48