new form template

src/editable-form/editable-form-bootstrap.js

@@ -5,10 +5,13 @@ Editableform based on Twitter Bootstrap
     
     //form template
     $.fn.editableform.template = '<form class="form-inline editableform"><div class="control-group">' + 
-    '&nbsp;<button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i></button>&nbsp;<button type="button" class="btn clearfix"><i class="icon-ban-circle"></i></button>' + 
+    '<div class="editable-input"></div><div class="editable-buttons"></div>' + 
-    '<div style="clear:both"><span class="help-block editable-error-block"></span></div>' + 
+    '<div class="help-block editable-error-block"></div>' + 
     '</div></form>'; 
     
+    //buttons
+    $.fn.editableform.buttons = '<button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i></button><button type="button" class="btn clearfix"><i class="icon-ban-circle"></i></button>';         
+    
     //error classes
     $.fn.editableform.errorGroupClass = 'error';
     $.fn.editableform.errorBlockClass = null;    

src/editable-form/editable-form-jqueryui.js

@@ -7,8 +7,9 @@ Editableform based on jQuery UI
          initTemplate: function() {
               this.$form = $($.fn.editableform.template);
               
-             //init buttons
+              //buttons
-             this.$form.find('button[type=submit]').button({
+              this.$form.find('div.editable-buttons').append($.fn.editableform.buttons);                
+              this.$form.find('button[type=submit]').button({
                  icons: { primary: "ui-icon-check" },
                  text: false
              });
@@ -16,14 +17,12 @@ Editableform based on jQuery UI
                  icons: { primary: "ui-icon-cancel" },
                  text: false
              });
+ 
          }
     });
     
-    //form template
+    //buttons
-    $.fn.editableform.template = '<form class="editableform"><div class="control-group">' + 
+    $.fn.editableform.buttons = '<button type="submit" style="height: 24px">submit</button><button type="button" style="height: 24px">cancel</button>';
-    '&nbsp;<button type="submit" style="height: 24px">submit</button>&nbsp;<button type="button" style="height: 24px">cancel</button></div>' + 
-    '<div class="editable-error-block"></div>' + 
-    '</form>'; 
     
     //error classes
     $.fn.editableform.errorGroupClass = null;

src/editable-form/editable-form.css

@@ -1,6 +1,15 @@
 .editableform,
 .editableform div.control-group {
-    margin-bottom: 0; 
+    margin-bottom: 0;
+    overflow: auto; 
+}
+
+.editable-buttons {
+   float: left;  
+}
+
+.editable-buttons button {
+   margin-left: 7px; 
 }
 
 .editableform-loading {
@@ -14,8 +23,7 @@
 
  .editable-error-block {
     max-width: 300px;
-    margin-top: 3px;
+    margin: 0;
-    margin-bottom: 0;
     clear: both; 
 }
 
@@ -23,11 +31,12 @@
    color: red;  
 }
 
-.editableform .editable-input {
+.editable-input {
     vertical-align: top; 
     display: inline-block;
     width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
     float: left;
+    padding-bottom: 9px;
 }
 
 .editableform textarea {
@@ -36,5 +45,5 @@
 
 .editableform .editable-date {
     padding: 0; 
-    margin: 0 0 9px 0;
+    margin: 0;
 }

src/editable-form/editable-form.js

@@ -34,6 +34,9 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
         },
         initTemplate: function() {
             this.$form = $($.fn.editableform.template); 
+            
+            //buttons
+            this.$form.find('div.editable-buttons').append($.fn.editableform.buttons);              
         },
         /**
         Renders editableform
@@ -57,8 +60,14 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
             //render input
             $.when(this.input.render())
             .then($.proxy(function () {
-                //place input
+                //input
-                this.$form.find('div.control-group').prepend(this.input.$input);
+                this.$form.find('div.editable-input').append(this.input.$input);
+                
+                //clear link
+                if(this.input.$clear) {
+                    this.$form.find('div.editable-input').append(this.input.$clear);  
+                }                
+                
                 //attach 'cancel' handler
                 this.$form.find('button[type=button]').click($.proxy(this.cancel, this));
                 //append form to container
@@ -94,19 +103,11 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
             this.$element.triggerHandler('cancel');
         },
         showLoading: function() {
-            var fw, fh, iw, ih;
+            var fw, fh, iw, bh;
             //set loading size equal to form
             if(this.$form) {
-                fh = this.$form.outerHeight() || 0;
+                this.$loading.width(this.$form.outerWidth());
-                fw = this.$form.outerWidth() || 0;
+                this.$loading.height(this.$form.outerHeight());
-                ih = (this.input && this.input.$input.outerHeight()) || 0;
-                iw = (this.input && this.input.$input.outerWidth()) || 0;
-                if(fh || ih) {
-                    this.$loading.height(fh > ih ? fh : ih);
-                }
-                if(fw || iw) {
-                    this.$loading.width(fw > iw ? fw : iw);
-                }
                 this.$form.hide();
             }
             this.$loading.show(); 
@@ -406,14 +407,19 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
       Note: following params could redefined in engine: bootstrap or jqueryui:
       Classes 'control-group' and 'editable-error-block' must always present!
     */      
-      $.fn.editableform.template = '<form class="form-inline editableform"><div class="control-group">' + 
+      $.fn.editableform.template = '<form class="form-inline editableform">'+
-    '&nbsp;<button type="submit">Ok</button>&nbsp;<button type="button">Cancel</button></div>' + 
+       '<div class="control-group">' + 
-    '<div class="editable-error-block"></div>' + 
+           '<div class="editable-input"></div><div class="editable-buttons"></div>'+
-    '</form>';
+       '</div>' + 
+       '<div class="editable-error-block"></div>' + 
+       '</form>';
       
       //loading div
       $.fn.editableform.loading = '<div class="editableform-loading"></div>';
       
+      //buttons
+      $.fn.editableform.buttons = '<button type="submit">Ok</button><button type="button">Cancel</button>';      
+      
       //error class attahced to control-group
       $.fn.editableform.errorGroupClass = null;