Fixed #740

primefaces · May 29, 2017 · 454f614 · 454f614
1 parent dceee36
commit 454f614
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/components/dialog/dialog.ts b/components/dialog/dialog.ts
@@ -73,7 +73,7 @@ export class Dialog implements AfterViewInit,OnDestroy {
 
     @Input() closable: boolean = true;
 
-    @Input() responsive: boolean;
+    @Input() responsive: boolean = true;
 
     @Input() appendTo: any;
 
@@ -83,6 +83,8 @@ export class Dialog implements AfterViewInit,OnDestroy {
 
     @Input() showHeader: boolean = true;
 
+    @Input() breakpoint: number = 640;
+
     @ContentChild(Header) headerFacet;
 
     @ViewChild('container') containerViewChild: ElementRef;
@@ -122,6 +124,8 @@ export class Dialog implements AfterViewInit,OnDestroy {
     mask: HTMLDivElement;
 
     closeIconMouseDown: boolean;
+
+    preWidth: number;
 
     constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) {}
 
@@ -200,7 +204,19 @@ export class Dialog implements AfterViewInit,OnDestroy {
 
         if(this.responsive) {
             this.documentResponsiveListener = this.renderer.listen('window', 'resize', (event) => {
-                this.positionOverlay();
+                let viewport = this.domHandler.getViewport();
+                let width = this.domHandler.getOuterWidth(this.containerViewChild.nativeElement);
+                if(viewport.width <= this.breakpoint) {
+                    if(!this.preWidth) {
+                        this.preWidth = width;
+                    }
+                    this.containerViewChild.nativeElement.style.left = '0px';
+                    this.containerViewChild.nativeElement.style.width = '100%';
+                }
+                else {
+                    this.containerViewChild.nativeElement.style.width = this.preWidth + 'px';
+                    this.positionOverlay();
+                }
             });
         }
 
@@ -318,6 +334,7 @@ export class Dialog implements AfterViewInit,OnDestroy {
 
     initResize(event: MouseEvent) {
         if(this.resizable) {
+            this.preWidth = null;
             this.resizing = true;
             this.lastPageX = event.pageX;
             this.lastPageY = event.pageY;

diff --git a/showcase/demo/dialog/dialogdemo.html b/showcase/demo/dialog/dialogdemo.html
@@ -206,9 +206,15 @@ <h3>Attributes</h3>
                         <tr>
                             <td>responsive</td>
                             <td>boolean</td>
-                            <td>false</td>
+                            <td>true</td>
                             <td>In responsive mode, dialog adjusts itself to screen width.</td>
                         </tr>
+                        <tr>
+                            <td>breakpoint</td>
+                            <td>number</td>
+                            <td>640</td>
+                            <td>Maximum screen width to display the dialog with 100% width in responsive mode.</td>
+                        </tr>
                         <tr>
                             <td>appendTo</td>
                             <td>any</td>