Ability to customize Dialog visible style property

[serlopez46]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[X] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Feature Descripton
I would like to ask for the ability to use flexbox in p-dialog component. Currently property "display" in ui-dialog is set to 'block' or 'none' depending on the "visible" attribute. This overrides a possible "display: flex" and using !important would override the 'none' value when dialog should be hidden.
In order to fix this a new div ui-dialog-container could be introduced inside ui-dialog in order to contain the titlebar, content and footer parts of the dialog.

Rough sketch of component structure:

<div class="ui-dialog ui-widget..."
  style="display: block; width: 300px; min-width: 200px; 
  z-index: 1009; left: 745px; top: 8px; opacity: 1;">
  <div class="ui-dialog-container" [ngStyle]="{'display': flex}">
    <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top">
      ...
    </div>
    <div class="ui-dialog-content ui-widget-content">
      ...
    </div>
    <div class="ui-dialog-footer ui-widget-content">
      ...
    </div>
  </div>
</div>

What is the motivation / use case for changing the behavior?
More flexible styling of the Dialog component.

Angular version: 2.0.X
4.0.0

PrimeNG version: 2.0.X
4.3.0

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
All

Language: [all | TypeScript X.X | ES6/7 | ES5]
All

[cagataycivici]

What if we add a property like displayStyle="block or flex"?

[pg100]

I have similar issue with TabView/TabPanel. Having displayStyle to set block or flex would be great!

[serlopez46]

A property displayStyle would resolve our problem indeed.

[cagataycivici]

We use ui-helper-hidden now instead of style property, so you can do;

.ui-dialog {
   display: flex
}

Same goes for TabPanel

[Arikael]

this doesn't work anymore with primeng 6+