2

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>

enter image description here

Martin
  • 83
  • 1
  • 6

2 Answers2

4

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

Tihomir Tonev
  • 145
  • 7
3

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

Hugo Noro
  • 3,145
  • 2
  • 13
  • 19