小编S. *_*. A的帖子

已解决问题：只需添加dynamicHeight到<mat-tab-group>

我目前有一张卡片(mat-card)，里面有 2 个标签（现在你只能看到一个标签，但想法是解决这个问题以添加另一个；这将具有相同的内容，但将作为一个例子，因为它只是 Lorem Ipsum暂时文本），我不知道如何做的是删除滚动条并且内容只是不断向下拉伸卡片。

我正在使用 Angular 5，当然还有 Angular Material 5。

我尝试了通过 Google 和 StackOverflow 找到的几件事，但没有一个对我有用。我在网格系统中使用 Flexbox。

我的 lorem.component.html 代码：

<div class="content-padder content-background">
  <div class="uk-section-small uk-section-default header">
    <div class="uk-container uk-container-large uk-animation-slide-top-medium">
      <h1><span uk-icon="credit-card"></span> Lorem</h1>

      <p>Lorem</p>
      <ul class="uk-breadcrumb">
        <li><a href="#">Lorem</a></li>
        <li><span href="">Lorem</span></li>
        <li><span href="">Lorem</span></li>
      </ul>
    </div>
  </div>
  <div class="uk-section-small content-padder content-background">
    <div class="container">
      <mat-card>
          <div class="mat-tab-fix">
            <mat-tab-group>
                <mat-tab class="tabs" label="Tab 1">

                        <h2 style="padding-top: 30px;">
                            <span>Lorem</span>
                          </h2>

          <div class="card-layout">
            <div class="card-column-1"> …

我试图让 Side Material Sidenav 在我打开栏时推送内容，显然在它关闭时推送内容；被推回原位的元素。目前它所做的是开放内容

这是我的 app-header.component.html

<!--- Toolbar starts here-->
<div class="container-toolbar">
    <mat-toolbar color="primary" class="fixed-header">
        <img src="" />
        <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
        <span class="spacer"></span>
        <button type="button" mat-icon-button href="">
            <mat-icon matTooltip="Salir">exit_to_app</mat-icon>
        </button>
    </mat-toolbar>
</div>

<!--- Sidenav starts here -->
<mat-sidenav-container style="height:100%;width:100%;">
    <mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'side' : 'push'"
        [opened]="(isHandset$ | async)" style="box-shadow: 0 5px 5px #999;z-index: 1;">
        <mat-nav-list>
            <mat-list-item>
                <a routerLink="/dashboard">Home</a>
                <mat-icon …

我写这篇文章是因为我对Angular Material的Mat Toolbar和Mat-sidenav有疑问。我试图使Sidenav进入工具栏，并且工具栏始终占据顶部，如下所示：

例

这是我的代码：

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="(isHandset$ | async)">
      <mat-toolbar class="fixed-header">
        <img class="logooTest" src="data:image/gif;base64,test"/>
      </mat-toolbar>
   		<mat-nav-list>
			  <mat-list-item>
				<a routerLink="/dashboard">Test</a>
        <mat-icon mat-list-icon>home</mat-icon>
        </mat-list-item>
        <mat-list-item>
          <a routerLink="/dashboard">Test</a>
          <mat-icon mat-list-icon>home</mat-icon>
          </mat-list-item>
          <mat-list-item>
          <a routerLink="/test">Test</a>
          <mat-icon mat-list-icon>tune</mat-icon>
          </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
              <span class="full-width" *ngIf="isExpanded || isShowing">Test dropdown</span>
              <mat-icon mat-list-icon>flash_on</mat-icon>
              <mat-icon …