How to set the width and height of igxDialog?

Question

I am trying to create a modal Dialog, but the width is not applied correctly.

<igx-dialog
  #alert
  title="Notification"
  message="Your email has been sent successfully!"
  leftButtonLabel="OK"
  (onLeftButtonSelect)="alert.close()"
  style="width:1000px"
></igx-dialog>

Answer 1

You can position the IgxDialogComponent in a custom div and then apply the desired styles. For this purpose you should use the IgxOverlayService of the IgxToggleDirective which the IgxDialogComponent uses.

A sample where this can be seen can be found here

Answer 2

According to the documentation there is a [positionSettings] where you can customize the property minSize. This will allow you to create a custom width and height for the dialog but this only works for what they call Elastic Positioning Strategy.

From what I have seen there is no property to which you can bind a change in width or height. It also seems not possible to pass down a style by input property.

Please check here an example that I have altered to change the width of the dialog by styling the CSS. The base code was taken from an example from the documentation but I thought it could be useful since it's an example on how you can create a custom style for the component. I simply added the width to the styling for testing and I believe it achieves your goal