How do i Adjust Mat Dialog Width (Angular 18 and Material 18.2.1)

Question

I want to adjust the width but seems when it reaches 600px it does not change. I have tried below,,, (In Angular 15 and Material 15.1.2 the implementation below works)

 const dialogRef = this.dialog.open(UpdateModalComponent, {

      width: '900px',
      data: {
        title: 'Update Template',
        fields: [
          { name: 'title', label: 'Title', type: 'text', required: true, placeholder: 'Enter title', errorMessage: 'Title is required' },
          { name: 'description', label: 'Description', type: 'textarea', required: true, placeholder: 'Enter description', errorMessage: 'Description is required' },
          { name: 'noticeTypeId', label: 'Notice Type', type: 'select', options:this.noticeOptions, required: true, placeholder: 'Select Notice Type', errorMessage: 'Notice Type is required and must start with +' },
        ],
        item:data

      }
    });

Answer 1

Please add the maxWidth (maxWidth: 'none') option to allow the popup width to resize to any specified value of width.

openDialog(): void {
      this.dialog.open(UpdateModalComponent, {
        width: '1000px',
        maxWidth: 'none',
        data: {
          title: 'Update Template',
          fields: [
            { name: 'title', label: 'Title', type: 'text', required: true, placeholder: 'Enter title', errorMessage: 'Title is required' },
            { name: 'description', label: 'Description', type: 'textarea', required: true, placeholder: 'Enter description', errorMessage: 'Description is required' },
            { name: 'noticeTypeId', label: 'Notice Type', type: 'select', options: ['Option 1', 'Option 2'], required: true, placeholder: 'Select Notice Type', errorMessage: 'Notice Type is required' }
          ],
          item: { id: 1, name: 'Sample Item' }
        }
      });
    }