1
0
mirror of https://github.com/kakwa/ldapcherry synced 2024-11-21 17:04:21 +01:00

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
This commit is contained in:
kakwa 2017-04-05 23:24:19 +02:00
parent eb36830845
commit a33a46e8b8
3 changed files with 26 additions and 2 deletions

View File

@ -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");

View File

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

View File

@ -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>