Primeng: Unitless Dialog Width-Height

[geogauci]

I'm submitting a ...

[x ] bug report => Search github for a similar issue or PR before submitting

Plunkr Case
http://plnkr.co/edit/JVIeFK

Current behavior
The dialog width is set to 300px, even if the width is set to auto. Also, not responsive.

Expected behavior
The dialog should by default take the width of the window, as per issue 1262. However, an auto width does not work at all.
My aim is to set the dialog width to 90% of the screen.

• Angular version: 2.4.6
• PrimeNG version: 2.0.0-rc3
• Browser: [all]

[gregorfelkar]

+1

I have similar issue, aiming to 80% window width. It would be very nice to have percent option on width attribute. Is there any workaround currently?

[bakasmarius]

This would really help to wait for the bug #2795 to be fixed.

[bickycheese]

Must have!

[blhussey]

Much needed feature.

[mlakhara]

@blhussey @bakasmarius This was taken in v 4.1.1. Can you please update and verify ?

[blhussey]

Angular: 4.3.4
PrimeNG: 4.1.3
Dynamic content is causing the issue. I forced the width on the content and the centering worked fine.

[bakasmarius]

Angular: 4.4.0-RC.0
PrimeNG: 4.2.0-rc.1
I just tested it and setting width in html does nothing at all, no matter if it is in pixels or percents.
However, adding CSS to .ui-dialog { } and using width in it works for pixels and percents.

[ericsvendsen]

For now I used the ::ng-deep combinator to set a width on the dialog:

::ng-deep .ui-dialog {
    width: 90% !important;
}

Seems fine for now, but just remember that ng-deep will change eventually. Therefore it would be nice to have a built-in solution for this.

[dhniels]

percentage support would be nice since the responsive property added at https://github.com/primefaces/primeng/issues/2795 doesnt work properly with dynamic content.

@ericsvendsen, your solution works great in the mean time. I added a max-width: 1000px to your rule to prevent it from getting absurdly wide on wider desktop screens.

[lasimone]

+1

[ARandomDude]

Please add this much-needed functionality. The workaround by @ericsvendsen does not seem to work for "dialogues in dialogues", meaning it does not work when a dialog has "appendTo='body'", and is probably not a lasting solution.

[sourabh8003]

@ARandomDude: It'll work just keep that piece of css code at you top level component's scss/css file.

[nanoTitan]

+1 on this. A percentage width is a must. The ng-deep solution could stop working in the future due to new version updates.

[mahald]

also would need this, would be pretty nice

[mahald]

+1

[alesbrelih]

+1

[cagataycivici]

We also need to support vw vh and any other units.

[cagataycivici]

width, height, minWidth and minHeight are deprecated, suggested way is using the style prop with the unit you prefer;

<p-dialog [style]="{width: '50vw'}"