时间戳

首页 > 解决方案 > CSS未应用于角度材质对话框

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

问题描述

我的 Angular 应用程序中有一个对话框，它没有执行在应用程序其他部分工作的 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”分开，但在对话框标题中不起作用。为什么？

标签： angular-material

解决方案

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

在此处插入 css

推荐阅读