如何去除angular material对话框中的白色背景或确保对话框适合父组件

Question

我已经编写了显示 angular 模态对话框的代码，但我不知道如何将它居中对齐并在屏幕很大时使其适合父组件我希望它居中.

但是发生的是模态对话框背景从左右溢出。enter code here

Post 列出组件

export class PostListComponent{


  ngOnInit(): void {}

 /** create modal post */
  createPost(): void {
    const dialogPosition: DialogPosition = { top: '50px' };

    this.matDialog.open(CreatePostComponent, {
      position: dialogPosition,
      maxWidth: '100vw',
      width: '100%',
      panelClass: 'post-dialog-container',
    });
  }
}

创建 Post 个组件

export class CreatePostComponent implements OnInit {
  user: string;
  postForm: FormGroup;
  cropping: boolean;
  fileToUpload: File | null = null;
  postData: any;
  croppedImage: any[];
  currentUser: any;
  currentUser$: Observable<User>;
  submitButton = false;

  constructor(private store: Store<State>, private formBuilder: FormBuilder, private 
    _ngZone: NgZone, private router: Router,
    public dialogRef: MatDialogRef<CreatePostComponent>,
    @Inject(MAT_DIALOG_DATA) public data: Post) { }

   @ViewChild('autosize') autosize: CdkTextareaAutosize;


  ngOnInit() {
    this.imageList = [];
    this.user = '/assets/user.png';
    this.currentUser$ = this.store.select(getCurrentUser);
    this.postForm = this.formBuilder.group({
      text: ['', []],
      image: ['', []],
    });
  }

  triggerResize() {
    this._ngZone.onStable.pipe(take(1))
      .subscribe(() => this.autosize.resizeToFitContent(true));
  }
}

创建 Post 组件 HTML

<div class="post-container">
  <div class="row justify-content-center">
    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-2 col-xl-3">
      <div class="" style="background-color: white;"></div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-8 col-xl-5">

      <div class="create-post">
        <mat-dialog-content>
          <div class="container-fluid-post">
            <div class="d-flex bd-highlight">
              <div class="p-2 flex-grow-1 bd-highlight">
                <div class="d-flex px-3 pointer">
                  <mat-icon (click)="closeDialog()" class="font-weight-bold">clear</mat- 
                    icon>
                </div>
              </div>
              <div class="p-2 bd-highlight">
                <button type="submit" class="btn btn-primary btn-sm font-weight-bold"
                  [disabled]="submitButton === false">Post</button>
              </div>
            </div>
            <mat-divider></mat-divider>
            <div class="d-flex">
              <div class="px-0">
                <div class="img-container">
                  <img src="{{ (currentUser$ | async).profilePicture | imageUrlPipe}}"
                    onerror="this.src='assets/no-avatar.png'" alt="user" height="40px" 
                    width="40px"
                    class="rounded-circle">
                </div>
              </div>
              <form [formGroup]="postForm" class="form-container" 
               (ngSubmit)="createPost()">
                <div class="post-container px-0">
                  <mat-form-field appearance="none" class="form-field">
                    <textarea matInput name="text" formControlName="text" id="text" 
                     class="post-input"
                      cdkTextareaAutosize #autosize="cdkTextareaAutosize" 
                      cdkAutosizeMinRows="1"
                      cdkAutosizeMaxRows="1000" placeholder="What would you like to say 
                today?">
            </textarea>
                  </mat-form-field>
                  <div class="d-flex bd-highlight">
                    <div class="p-2 flex-grow-1 bd-highlight">
                      <div class="d-flex">
                        <div class="pointer text-danger">
                          <input type="file" accept="image/*" #file hidden 
                              (change)="addImage($event)" />
                          <mat-icon id="file-input" (click)="file.click()" class="icon-container">add_a_photo</mat-icon>
                        </div>
                      </div>
                    </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </mat-dialog-content>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-2 col-xl-3">
      <div class=""></div>
    </div>
  </div>
</div>

我想删除模态对话框中的背景颜色，例如它应该只适合页面的中心，这意味着它应该适合父宽度。

我现在有这样的东西

更新我希望模态 doialog 只显示表单字段，多余的白色 space 应该被省略我在这里添加了 stackblitz stackblitz link

Answer 1

变通后，我决定将 mat-dialog 设置为透明，将框阴影设置为 none 并将滚动策略更改为 scrollStrategy：new NoopScrollStrategy()

根据上述问题更新的代码如下：

Post 列表组件

............ previous code
    this.matDialog.open(CreatePostComponent, {
      position: dialogPosition,
      maxWidth: '100vw',
      width: '100%',
      panelClass: 'post-dialog-container',
      scrollStrategy: new NoopScrollStrategy()
    });
  }

然后用下面的代码添加全局样式

  .post-dialog-container .mat-dialog-container {
    background-color: var(--background);
    box-shadow: none;
  padding: 0px !important;
  overflow: hidden !important;
}

然后一切都修好了

如何去除angular material对话框中的白色背景或确保对话框适合父组件

How to remove the white background in the angular material dialog or ensure that the dialog fits parent component

angular-material

angular

mat-dialog