Dialog width too small, any way to change it?

Question

I'm using a Dialog as a Form Container but when I have many Fields or a long h3 title, it gets strange, since the width is small (280px).

Is there a way to change it's width without having to change it's css? Maybe a width property?

Answer 1

The version 2.2.0 of angular2-mdl now supports advanced configuration possibilities. You now can provide css styles that are applied to the dialog host element. For example:

let pDialog = this.dialogService.showCustomDialog({
  component: LoginDialogComponent,
  providers: [{provide: TEST_VALUE, useValue: 'Just an example'}],
  isModal: true,
  styles: {'width': '350px'},
  clickOutsideToClose: true
});

If you are using the declarative approach this is also possible:

<mdl-dialog #editUserDialog
            [mdl-dialog-config]="{
                 clickOutsideToClose: true, 
                 styles:{'width': '350px'}, 
                 modal:true
            }">
...
</mdl-dialog>