diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/validation/valshowvalidation.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valshowvalidation.directive.js
index 60d0c1c104..058b86d667 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/validation/valshowvalidation.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valshowvalidation.directive.js
@@ -11,19 +11,23 @@ function valShowValidation(serverValidationManager) {
         restrict: "A",
         link: function (scope, element, attr, ctrl) {
 
+            var className = attr.valShowValidation ? attr.valShowValidation : "show-validation";
+            var savingEventName = attr.savingEvent ? attr.savingEvent : "saving";
+            var savedEvent = attr.savedEvent ? attr.savingEvent : "saved";
+
             //we should show validation if there are any msgs in the server validation collection
             if (serverValidationManager.items.length > 0) {
-                element.addClass("show-validation");
+                element.addClass(className);
             }
 
             //listen for the forms saving event
-            scope.$on("saving", function (ev, args) {
-                element.addClass("show-validation");
+            scope.$on(savingEventName, function (ev, args) {
+                element.addClass(className);
             });
             
             //listen for the forms saved event
-            scope.$on("saved", function (ev, args) {
-                element.removeClass("show-validation");
+            scope.$on(savedEvent, function (ev, args) {
+                element.removeClass(className);
             });
             
         }
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 4c8bc53215..756560931a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -4,6 +4,9 @@
 .tab-content .control-group .umb-editor {
   width:66.6%;
 }
+.umb-modal .control-group .umb-editor {
+    width: 80%;
+}
 
 
 //
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.controller.js
index 2eee8dbcb8..dfd0a6e556 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.controller.js
@@ -61,7 +61,7 @@ function InsertMacroController($scope, entityResource, macroResource, umbPropEdi
     $scope.macroParams = [];
     
     $scope.submitForm = function () {
-
+        
         if ($scope.wizardStep === "paramSelect") {
             //we need to broadcast the saving event for the toggle validators to work
             $scope.$broadcast("saving");
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.html
index 30835a5c4f..7e2b8e330c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.html
@@ -1,41 +1,41 @@
-<div class="umb-panel show-validation" ng-controller="Umbraco.Dialogs.InsertMacroController">
+<form novalidate name="insertMacroForm" ng-submit="submitForm()" ng-controller="Umbraco.Dialogs.InsertMacroController">
+    <div class="umb-panel" val-show-validation>        
 
-    <form novalidate name="insertMacroForm" ng-submit="submitForm()">
-        
         <div class="umb-panel-header">
             <div class="umb-el-wrap umb-panel-buttons">
                 <div class="btn-toolbar umb-btn-toolbar">
+                    <button type="button" class="btn" ng-click="close()">Cancel</button>
                     <button type="submit" class="btn btn-primary">Ok</button>
                 </div>
             </div>
         </div>
 
         <div class="umb-panel-body umb-scrollable" auto-scale="1">
-            <div class="tab-content umb-control-group" ng-switch="wizardStep">
+            <div class="umb-control-group" ng-switch="wizardStep">
                 <div class="umb-pane" ng-switch-when="macroSelect">
-                    
+
                     <label for="macroName">Choose a macro</label>
                     <select name="selectedMacro" ng-model="$parent.selectedMacro" ng-options="m.id as m.name for m in macros" required>
                         <option value="">-- Choose macro --</option>
-                    </select>    
+                    </select>
 
                 </div>
                 <div class="umb-pane" ng-switch-when="paramSelect">
-                    
+
                     <ul class="unstyled">
                         <li ng-repeat="param in $parent.macroParams">
-                            
-                            <div class="control-group umb-control-group" ng-class="{error: insertMacroForm.$invalid}" >
+
+                            <div class="control-group umb-control-group" ng-class="{error: insertMacroForm.$invalid}">
                                 <label>{{param.name}}</label>
-                                <umb-editor model="param"></umb-editor>    
+                                <umb-editor model="param"></umb-editor>
                             </div>
 
                         </li>
                     </ul>
-                    
+
                 </div>
             </div>
         </div>
 
-    </form>
-</div>
+    </div>
+</form>