diff --git a/demo-shell-ng2/app/app.component.css b/demo-shell-ng2/app/app.component.css
index cdfe6eb2e7..e3b36fd2a2 100644
--- a/demo-shell-ng2/app/app.component.css
+++ b/demo-shell-ng2/app/app.component.css
@@ -9,4 +9,4 @@
}
.user-profile{
margin-right: 3px;
-}
\ No newline at end of file
+}
diff --git a/demo-shell-ng2/app/css/app.css b/demo-shell-ng2/app/css/app.css
index 3611cf6ae8..3656efa93b 100644
--- a/demo-shell-ng2/app/css/app.css
+++ b/demo-shell-ng2/app/css/app.css
@@ -35,3 +35,7 @@ body, html {
text-align: center;
position: relative;
}
+
+._dialog_overlay {
+ position: static !important;
+}
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 986e63bc43..f108c3dfa6 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -35,6 +35,10 @@
+
+
+
+
```
+#### Dialogs Polyfill
+
+To make the dialog working with all the browser you have to add the dialog polyfill to you project:
+
+```sh
+npm install --save dialog-polyfill
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+
+
+
+
+```
## Basic usage examples
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
index fbb2293625..e1c6b010bc 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
@@ -24,6 +24,7 @@ import { FormFieldModel } from '../core/form-field.model';
declare let __moduleName: string;
declare var componentHandler;
+declare let dialogPolyfill: any;
@Component({
moduleId: __moduleName,
@@ -122,6 +123,11 @@ export class AttachWidget extends WidgetComponent implements OnInit {
public showDialog() {
this.setupFileBrowser();
this.getExternalContentNodes();
+
+ if (!this.dialog.nativeElement.showModal) {
+ dialogPolyfill.registerDialog(this.dialog.nativeElement);
+ }
+
if (this.dialog) {
this.dialog.nativeElement.showModal();
}
diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md
index c8b225ebc9..719e72b6a5 100644
--- a/ng2-components/ng2-activiti-tasklist/README.md
+++ b/ng2-components/ng2-activiti-tasklist/README.md
@@ -47,6 +47,26 @@ Also make sure you include these dependencies in your `index.html` file:
```
+#### Dialogs Polyfill
+
+To make the dialog working with all the browser you have to add the dialog polyfill to you project:
+
+```sh
+npm install --save dialog-polyfill
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+
+
+
+
+```
## Basic usage example Activiti Task List
The component shows the list of all the tasks filter by the
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
index 3f77d032fe..15da8c356d 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
@@ -21,6 +21,7 @@ import { TaskDetailsModel } from '../models/task-details.model';
import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
declare let componentHandler: any;
+declare let dialogPolyfill: any;
@Component({
selector: 'activiti-start-task',
@@ -85,6 +86,9 @@ export class ActivitiStartProcessButton implements OnInit {
}
public showDialog() {
+ if (!this.dialog.nativeElement.showModal) {
+ dialogPolyfill.registerDialog(this.dialog.nativeElement);
+ }
if (this.dialog) {
this.dialog.nativeElement.showModal();
}