Question

我的角度应用程序中有一个对话框，该对话框不执行在该应用程序的其他部分中起作用的css命令。在我的主视图中，我有一个mat-toolbar定义如下（为了简洁起见，没有显示sidenav）：

<div style="height: 100vh;">

  <mat-toolbar color="primary">

    <span class="lg-view" fxHide.lt-md>
      <b class="cawg">CAWG</b>&nbsp;&nbsp;
      <b class="cawg-header">T</b><span class="cawg-text">racking and </span>
      <b class="cawg-header">R</b><span class="cawg-text">emote&nbsp;</span>
      <b class="cawg-header">A</b><span class="cawg-text">ircraft&nbsp;    </span> 
      <b class="cawg-header">C</b><span class="cawg-text">ommunication&nbsp;    </span>
      <b class="cawg-header">S</b><span class="cawg-text">ystem (TRACS)     </span>
      <span class="cawg-text">3.0</span>

            <b class="cawg-text">TRACS3</b>
      </span>

    <span class="flex-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <button mat-icon-button class="d-none d-sm-inline" [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
        <button mat-menu-item (click)="realTimeTracking()">
          <mat-icon>airplanemode_active</mat-icon>
          <span>Real-time Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon svgIcon="historical-tracking-black-48-inactive" style="color: black"></mat-icon>
          <span>Historical Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_on</mat-icon>
          <span>Display Grids</span>
        </button>
        <button mat-menu-item>
          <mat-icon>airplanemode_inactive</mat-icon>
          <span>Stop Tracking</span>
        </button>
        <button mat-menu-item>
          <mat-icon>grid_off</mat-icon>
          <span>Grids Off</span>
        </button>
    </mat-menu>
    <button mat-icon-button  class="d-none d-sm-inline">
        <a [routerLink]="'/settings'"><mat-icon>settings</mat-icon></a>
    </button>
    <button mat-icon-button routerLink="chat" class="d-none d-sm-inline">
      <mat-icon>chat_bubble_outline</mat-icon>
    </button>
    <button mat-icon-button routerLink="reportIssue" class="d-none d-sm-inline">
      <mat-icon>bug_report</mat-icon>
    </button>
    <button mat-icon-button routerLink="about" class="d-none d-sm-inline">
      <mat-icon>info</mat-icon>
    </button>
    <button mat-button routerLink="login" class="nav-button">
      Sign In
    </button>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a href="#" (click)="sidenav.toggle()"><mat-icon aria-label="Side nav toggle icon" >menu</mat-icon></a>

    </div>

  </mat-toolbar>
...

然后有一个对话框

<mat-toolbar  color="primary" class="dialog-toolbar">
  <span align="center">Real-time Tracking</span>
  <span class="flex-spacer"></span>
  <button mat-button mat-dialog-close>&times;</button>
</mat-toolbar>

<mat-dialog-content >

  <mat-form-field>
    <label>Date/Time Range
      <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
         [selectMode]="'range'" style="width: 70%">
      <owl-date-time #dt10></owl-date-time>
    </label>
  </mat-form-field>
</mat-dialog-content>

<mat-dialog-actions align="center">
  <button class="mat-raised-button"(click)="close()">Close</button>
  <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
</mat-dialog-actions>

在导航栏中打开对话框：

  constructor(
    private breakpointObserver: BreakpointObserver, 
    private dialog: MatDialog){}


  realTimeTracking() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.hasBackdrop = true;
    dialogConfig.width = '60%';
    dialogConfig.panelClass = "dialog-toolbar";
    dialogConfig.data = {
      title: "Real-time Tracking"
    };

    console.log('real-time tracking, dialogConfig.data:', dialogConfig);

    this.dialog.open(DialogsComponent, dialogConfig );

  };

并尝试对其应用以下CSS：

.dialog-toolbar {
  mat-toolbar {
    flex: 1 1 auto;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 10px;
    border: 1px solid red;
  }
}

.flex-spacer {
  flex: 1 1 auto;
}

这是它的外观截图：

由于某种原因，将应用红色边框，但是我无法使标题栏为对话框宽度的100％。我尝试了100％，600px，flex。 100％在主标题中效果很好，但在这里不是。在“实时跟踪”字符串和“ x”按钮之间没有任何空格可以关闭对话框。 'flex 1 1 auto'可以很好地将按钮与主标题中的'3.0'分开，但不适用于对话框标题中。为什么？

Answer 1

::: ng-deep .mat-dialog-container {

在此处插入CSS

CSS未应用于角度材质对话框

1 个答案: