diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js index aa3657f4080164ad4d54906f5fb5d3fd8ab3a783..f4ae7a1edbf5240daeec04e404d758590f10b581 100755 --- a/opentech/static_src/src/javascript/main.js +++ b/opentech/static_src/src/javascript/main.js @@ -74,23 +74,35 @@ import MobileSearch from './components/mobile-search'; }); function mobileFilterPadding (element) { + const expanded = 'expanded-filter-element'; const dropdown = $(element).closest('.select2'); - const openDropdown = $('.select2 .expanded'); + const openDropdown = $('.select2 .' + expanded); let dropdownMargin = 0; + if(openDropdown.length > 0 && !openDropdown.hasClass('select2-container--open')){ - openDropdown.removeClass('expanded'); + // reset the margin of the select we previously worked + openDropdown.removeClass(expanded); + // store the offset to adjust the new select box (elements above the old dropdown unaffected) if (dropdown.position().top > openDropdown.position().top ){ dropdownMargin = parseInt(openDropdown.css('marginBottom')); } openDropdown.css('margin-bottom', '0px'); } + if(dropdown.hasClass('select2-container--open')){ - dropdown.addClass('expanded'); - const id = $(element).closest('.select2-selection').attr('aria-owns'); - const match = $(`ul#${id}`); + dropdown.addClass(expanded); + const dropdownID = $(element).closest('.select2-selection').attr('aria-owns'); + // Element which has the height of the select dropdown + const match = $(`ul#${dropdownID}`); + const dropdownHeight = match.outerHeight(true); + + // Element which has the position of the dropdown const positionalMatch = match.closest('.select2-container'); - const margin = match.outerHeight(true); - dropdown.css('margin-bottom', `${margin}px`); + + // Pad the bottom of the select box + dropdown.css('margin-bottom', `${dropdownHeight}px`); + + // bump up the dropdown options by height of closed elements positionalMatch.css('top', positionalMatch.position().top - dropdownMargin); }