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

Question

I have written the code to display the angular modal dialog, but I don't know how to align it center and make it fit inside the parent component when screen is large I want it to be centered.

But what happens is that is overflows right and left with the modal dialog background.enter code here

Post List Components

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',
    });
  }
}

Create Post Components

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));
  }
}

Create Post Component 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>

I want to remove the background color in the modal dialog such as it should only fit in the center of the page, Meaning that it should fit the parent width.

I have something like this by now

UPDATES I want the modal doialog to show only the form field the extra white space should be omitted I have added the stackblitz in here stackblitz link

can you create stackblitz demo ? – YogendraR Oct 13 '21 at 13:35 — YogendraR, Oct 13 '21 at 13:35
I have added the stackblitz – Andongwisye Mwamengo Oct 14 '21 at 12:19 — Andongwisye Mwamengo, Oct 14 '21 at 12:19

score 0 · Accepted Answer · answered Oct 17 '21 at 00:04

After work around I decided to set mat-dialog transparent,set box shadow to none and change scroll strategy to scrollStrategy: new NoopScrollStrategy()

The codes updated are as follows as per question above:

Post List Component

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

Then add global styles with the following code

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

Then after that everything were fixed

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

1 Answers1