PWV-1: Fixing modal incrementing body padding issues

Packages/ohif-core/client/components/bootstrap/dialog/form.html

@@ -1,19 +1,28 @@
 <template name="dialogForm">
     <div id="{{this.id}}" class="modal fade" tabindex="-1" role="dialog">
         <div class="modal-dialog {{this.dialogClass}}" role="document">
-            {{#form class='modal-content' api=instance.api schema=this.schema hideValidationBox=true}}
+            {{#form class='modal-content' hideValidationBox=true
+                api=instance.api schema=this.schema
+            }}
                 <div class="modal-header">
-                    {{#button class='close' action='cancel' tagAttributes=(extend this.tagAttributes aria-label='Close')}}
-                        <span aria-hidden="true">&times;</span>
-                    {{/button}}
+                    {{#button class='close' action='cancel'
+                        tagAttributes=(extend this.tagAttributes
+                            data-dismiss='modal' aria-label='Close'
+                        )
+                    }}<span aria-hidden="true">&times;</span>{{/button}}
                     <h4 class="modal-title">{{this.title}}</h4>
                 </div>
                 <div class="modal-body">
                     {{>UI.contentBlock}}
                 </div>
                 <div class="modal-footer">
-                    {{#button class='btn btn-default' action='cancel'}}{{choose this.cancelLabel 'Cancel'}}{{/button}}
-                    {{#button class='btn btn-primary' action='confirm'}}{{choose this.confirmLabel 'Confirm'}}{{/button}}
+                    {{#button class='btn btn-default'
+                        action='cancel'
+                        tagAttributes=(extend this.tagAttributes data-dismiss='modal')
+                    }}{{choose this.cancelLabel 'Cancel'}}{{/button}}
+                    {{#button class='btn btn-primary'
+                        action='confirm'
+                    }}{{choose this.confirmLabel 'Confirm'}}{{/button}}
                 </div>
             {{/form}}
         </div>

Packages/ohif-core/client/components/bootstrap/dialog/form.js

@@ -1,9 +1,11 @@
 import { Template } from 'meteor/templating';
 import { _ } from 'meteor/underscore';
 
-Template.dialogForm.onCreated(() => {
+Template.dialogForm.onRendered(() => {
     const instance = Template.instance();
 
+    const $modal = instance.$('.modal');
+
     instance.api = {
 
         confirm() {
@@ -13,6 +15,9 @@ Template.dialogForm.onCreated(() => {
                 return;
             }
 
+            // Hide the modal, removing the backdrop
+            $modal.modal('hide');
+
             // Get the form value and call the confirm callback or resolve the promise
             const formData = form.value();
             if (_.isFunction(instance.data.confirmCallback)) {
@@ -23,6 +28,9 @@ Template.dialogForm.onCreated(() => {
         },
 
         cancel() {
+            // Hide the modal, removing the backdrop
+            $modal.modal('hide');
+
             // Call the cancel callback or resolve the promise
             if (_.isFunction(instance.data.cancelCallback)) {
                 instance.data.cancelCallback(instance.data.promiseReject);
@@ -43,10 +51,4 @@ Template.dialogForm.onRendered(() => {
         backdrop: 'static',
         keyboard: false
     });
-
-    // Remove the created modal backdrop from DOM after promise is done
-    const $backdrop = $modal.next('.modal-backdrop');
-    const dismissDialogBackdrop = () => $backdrop.remove();
-    instance.data.promise.then(dismissDialogBackdrop, dismissDialogBackdrop);
-
 });