Dialog content width is set to a different value after its first open

Hi there,

The dialog width is changed after its first open,

from:

<div class=”igx-overlay__content–modal igx-overlay__content–relative” style=””>

to:

<div class=”igx-overlay__content–modal igx-overlay__content–relative” style=”width: 1285.6px;>

But the content is only around 300px in width so the dialog is expanded beyond its content.
What I’ve tried so far:

• Modified the content width to fixed but doesn’t change anything.
• Tried the solution here: https://stackblitz.com/edit/dialog-custom-width

System:

• Npm package:  igniteui-angular@8.1.1
• Angular: v8

Hello Phan,

I have taken a look at the StackBlitz you provided and was not able to reproduce this issue. I opened the dialog several times and each time overlay content div had no width. I have also recreated your sample with Ignite UI for Angular 8.1.0 in this StackBlitz. As you can see the issue does not reproduce and in 8.1.0 – again I have opened the dialog several times and no width appear in the overlay content div. I have also removed the min-width and width of the dialog and still was not able to reproduce the issue.

Can you provide a sample where this issue reproduces as well as steps to reproduce it?

Looking forward to your reply with samples and steps included.

Hi Milko,
I've been trying to reproduce it in this  StackBlitz but the component is too dependency heavy, I'll get back to you when there is something new.

Hi Phan,

I have inspected your new StackBlitz sample. What I saw is you are showing your popup-form after dialog isOpen becomes true. This may force the issue you are facing. At the moment we are show the dialog it has no any content, but a single title. The width of this dialog is about 280px. This is what we are trying to render. In the same time Angular detects that dialog is already shown and puts inside the popupFormComponent. If this happens fast enough we are showing the dialog with the correct size, otherwise we use the size of the initial dialog.

The question here is why you put the *ngIf in your popup form here:

If you remove this *ngIf I think you should not face this issue.

Sincerely,
Milko
Software Developer

Hello Milko,
I've tried removing the condition but the problem still persists, even when I use a very simple dialog body.
Will get back to you when more findings come up

As a workaround, I'll remove the style attribute from the outlet after opening the dialog

this.dialogOutletRef.nativeElement.querySelector('.igx-overlay__content--modal.igx-overlay__content--relative').removeAttribute("style");

Hi Phan,

I have spent some more time on your sample trying to reproduce this issue with no success. Please if you are able to reproduce it in isolated sample send the sample to us so we can investigate it further.

For anyone else running into the same problem, I was able to fix it by surrounding the <igx-dialog> with a <div style="width: 0"> tag. This will keep the dialog from growing on subsequent rendering.