add dynamic resizing to align input-group-addon

* add class to identify the 2 form columns
* add a js that calculate max width and resize all input-group-addon
spans
* load the js in the base template

resources/static/js/alignforms.js

@@ -0,0 +1,23 @@
+classes = ['lcform-col-1', 'lcform-col-2']; 
+for(var j in classes){
+    var formSelector = classes[j];
+    var forms = document.getElementsByClassName(formSelector);
+    //console.log(formSelector);
+    //console.log(forms);
+    if (forms.length > 0){
+        var in_groups = forms[0].getElementsByClassName('input-group-addon');
+        //console.log(in_groups);
+        var i, len = in_groups.length;
+        var longest = 0;
+        for(i=0; i < len; i++){
+            if (in_groups[i].id != 'basic-addon-password2'){
+                longest = longest < in_groups[i].clientWidth ? in_groups[i].clientWidth : longest;
+            }
+        }
+        for(i=0; i < len; i++){
+            in_groups[i].style.minWidth = (longest + 0) + 'px';
+        }
+        //console.log(longest);
+    }
+}
+//console.log("end_re");

resources/templates/base.tmpl

@@ -71,4 +71,5 @@
       </div>
     </div>
 </body>
+<script type="text/javascript" src="/static/js/alignforms.js"></script>
 </html>

resources/templates/form.tmpl

@@ -74,10 +74,10 @@ for a in sorted(attributes.keys(), key=lambda attr: attributes[attr]['weight']):
 % endfor
 </%def>
 <div class="row">
-<div class="col-md-6 column">
+<div class="col-md-6 column lcform-col-1">
 ${form_col(lc1)}
 </div>
-<div class="col-md-6 column">
+<div class="col-md-6 column lcform-col-2">
 ${form_col(lc2)}
 </div>
 </div>