diff --git a/admin/css/screen.css b/admin/css/screen.css index 1df00cfbe..903814949 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -182,6 +182,8 @@ form.small .field input.text, form.small .field textarea, form.small .field sele .field .TreeDropdownField { padding: 0; } .field .TreeDropdownField .treedropdownfield-panel { border: 1px solid #b3b3b3; border-top: none; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .field .TreeDropdownField.treedropdownfield-open-tree { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } +.field .TreeDropdownField.treedropdownfield-with-rise { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } +.field .TreeDropdownField.treedropdownfield-with-rise .treedropdownfield-panel { border: 1px solid #b3b3b3; border-bottom: none; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .field .TreeDropdownField .badge { display: none; } .field .dropdown select { margin-top: 8px; } .field .chzn-container { max-width: 416px; } diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 9f17487ca..f7fb6d16b 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -191,6 +191,21 @@ form.small .field, .field.small { @include border-bottom-right-radius(0); } + &.treedropdownfield-with-rise { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + + .treedropdownfield-panel { + border: 1px solid lighten($color-medium-separator, 20%); + border-bottom: none; + + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + } + } + // Hide badges, as they cost too much horizontal space, // and mess up rendering for selected node title .badge { diff --git a/javascript/TreeDropdownField.js b/javascript/TreeDropdownField.js index 13042dac0..29dbf756d 100644 --- a/javascript/TreeDropdownField.js +++ b/javascript/TreeDropdownField.js @@ -86,16 +86,45 @@ .removeClass('ui-icon-triangle-1-s') .addClass('ui-icon-triangle-1-n'); - if(tree.is(':empty') && !panel.hasClass('loading')) this.loadTree(); + if(tree.is(':empty') && !panel.hasClass('loading')) { + this.loadTree(null, this._riseUp); + } else { + this._riseUp(); + } + this.trigger('panelshow'); }, + _riseUp: function() { + var container = this, + dropdown = this.getPanel(), + toggle = this.find(".treedropdownfield-toggle-panel-link"), + offsetTop = toggle.innerHeight(), + elHeight, + elPos, + endOfWindow; + + if (toggle.length > 0) { + endOfWindow = ($(window).height() + $(document).scrollTop()) - toggle.innerHeight(); + elPos = toggle.offset().top; + elHeight = dropdown.innerHeight(); + + // If the dropdown is too close to the bottom of the page, position it above the 'trigger' + if (elPos + elHeight > endOfWindow && elPos - elHeight > 0) { + container.addClass('treedropdownfield-with-rise'); + offsetTop = -dropdown.outerHeight(); + } else { + container.removeClass('treedropdownfield-with-rise'); + } + } + dropdown.css({"top": offsetTop + "px"}); + }, closePanel: function() { jQuery('body').unbind('click', _clickTestFn); // swap the up arrow with a down arrow var toggle = this.find(".treedropdownfield-toggle-panel-link"); toggle.removeClass('treedropdownfield-open-tree'); - this.removeClass('treedropdownfield-open-tree'); + this.removeClass('treedropdownfield-open-tree treedropdownfield-with-rise'); toggle.find("a") .removeClass('ui-icon-triangle-1-n')